备案期间网站如何访问,婚庆网站怎么设计模板,造价信息网,凡科手机网站设置问题核心概念 State#xff1a;这是你的应用程序的状态#xff0c;是一个响应式的对象。 Getters#xff1a;类似于 Vuex 中的 getters#xff0c;它们是基于 state 的计算属性。 Actions#xff1a;类似于 Vuex 中的 mutations 和 actions#xff0c;它们用于改变 state。但…核心概念 State这是你的应用程序的状态是一个响应式的对象。 Getters类似于 Vuex 中的 getters它们是基于 state 的计算属性。 Actions类似于 Vuex 中的 mutations 和 actions它们用于改变 state。但与 Vuex 不同的是在 Pinia 中mutations 和 actions 被合并为一个概念即 actions。 其他特性Pinia 还支持插件、热重载、服务器端渲染等。 安装
npm install pinia
# 或者使用 yarn
yarn add piniamain.js
import { createApp } from vue
import { createPinia } from pinia
import App from ./App.vue const app createApp(App)
const pinia createPinia() app.use(pinia)
app.mount(#app)store/counter.js
import { defineStore } from pinia export const useCounterStore defineStore(counter, { // state state: () ({ count: 0, }), // getters getters: { doubleCount: (state) state.count * 2, }, // actions actions: { increment() { this.count }, decrement() { this.count-- }, // 你也可以在 actions 中使用其他 actions 或 getters incrementBy(amount) { this.count amount }, },
})App.vue
template div pCount: {{ counterStore.count }}/p pDouble Count: {{ counterStore.doubleCount }}/p button clickcounterStore.incrementIncrement/button button clickcounterStore.decrementDecrement/button button clickcounterStore.incrementBy(5)Increment by 5/button /div
/template script
import { useCounterStore } from ./store/counter export default { setup() { const counterStore useCounterStore() return { counterStore } },
}
/script扩展 Store
由于有了底层 API 的支持Pinia store 现在完全支持扩展。以下是你可以扩展的内容 为 store 添加新的属性 定义 store 时增加新的选项 为 store 增加新的方法 包装现有的方法 改变甚至取消 action 实现副作用如本地存储 仅应用插件于特定 store 1. 插件 (Plugins)
插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。
import { createPinia } from pinia// 创建的每个 store 中都会添加一个名为 secret 的属性。
// 在安装此插件后插件可以保存在不同的文件中
function SecretPiniaPlugin() {return { secret: the cake is a lie }
}const pinia createPinia()
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin)// 在另一个文件中
const store useStore()
store.secret // the cake is a lie2. 持久化状态 (Persistence) 代码示例使用第三方插件 pinia-plugin-persistedstate
npm install pinia-plugin-persistedstateimport { createApp } from vue;
import { createPinia } from pinia;
import createPersistedState from pinia-plugin-persistedstate; const pinia createPinia(); // 使用插件
pinia.use(createPersistedState({ storage: window.localStorage,
})); const app createApp(/* ... */);
app.use(pinia);
// ...3. 订阅状态变化 (Subscribing to State Changes) Pinia 允许你订阅 Store 的状态变化以便在状态更新时执行某些操作。这可以通过 pinia.state.subscribe 方法实现。 代码示例在插件中使用
// 插件中的代码
app.pinia.state.subscribe((mutation, state) { // mutation 是一个对象包含 typedirect 或 patch和 key // state 是 Store 的当前状态 console.log(State mutated:, mutation, state);
});4. 使用 TypeScript 进行类型安全 如果你在使用 TypeScriptPinia 提供了强大的类型支持确保你的代码是类型安全的。你可以为 state、getters 和 actions 提供类型定义。
代码示例使用 TypeScript
import { defineStore } from pinia; interface CounterState { count: number;
} export const useCounterStore defineStore(counter, { state: (): CounterState ({ count: 0, }), // ...
});5. 访问其他 Store 在 Pinia 中一个 Store 可以很容易地访问另一个 Store 的状态和方法。你可以直接在 Store 的 actions 中使用 useStore 函数来访问其他 Store。
代码示例
import { defineStore } from pinia;
import { useOtherStore } from ./otherStore; export const useCounterStore defineStore(counter, { // ... actions: { incrementAndDoSomethingElse() { this.count; const otherStore useOtherStore(); otherStore.doSomething(); }, },
});在组件外部使用 Store
1. 创建 Pinia 实例和 Store 首先你需要在你的主入口文件如 main.js 或 main.ts中创建 Pinia 实例并使用它创建你的 Store。
// main.js
import { createApp } from vue
import { createPinia } from pinia
import App from ./App.vue const app createApp(App)
const pinia createPinia() // 使用 Pinia
app.use(pinia) // 挂载应用
app.mount(#app) // 假设你有一个名为 useCounterStore 的 Store
// import { useCounterStore } from ./stores/counter
// 但在这里我们不会直接在 main.js 中使用它2. 在组件外部使用 Store 示例在路由守卫中使用 Store 假设你有一个名为 useUserStore 的 Store用于管理用户状态并且你想在路由守卫中检查用户是否已登录。
// router/index.js
import { createRouter, createWebHistory } from vue-router
import { useUserStore } from ./stores/user // 假设你的 Store 在这里
import pinia from ../main // 引入 Pinia 实例你可能需要根据你的项目结构来调整这个路径 const router createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ // ...你的路由配置 ],
}) // 在路由守卫中使用 Store
router.beforeEach((to, from, next) { // 使用 pinia.useStore() 获取 Store 实例 const userStore pinia.useUserStore() // 假设有一个 isLoggedIn 的 getter 或 state 属性 if (to.meta.requiresAuth !userStore.isLoggedIn) { // 重定向到登录页面或执行其他操作 next(/login) } else { next() }
}) export default router
