Vue3 之 Pinia 核心概念（八）
核心概念
State：这是你的应用程序的状态，是一个响应式的对象。
Getters：类似于 Vuex 中的 getters，它们是基于 state 的计算属性。
Actions：类似于 Vuex 中的 mutations 和 actions，它们用于改变 state。但与 Vuex 不同的是，在 Pinia 中，mutations 和 actions 被合并为一个概念，即 actions。
其他特性：Pinia 还支持插件、热重载、服务器端渲染等。
安装
npm install pinia
# 或者使用 yarn
yarn add pinia
main.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> <p>Count: {{ counterStore.count }}</p> <p>Double Count: {{ counterStore.doubleCount }}</p> <button @click="counterStore.increment">Increment</button> <button @click="counterStore.decrement">Decrement</button> <button @click="counterStore.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 lie'
2. 持久化状态 (Persistence)
代码示例（使用第三方插件 pinia-plugin-persistedstate）：
npm install pinia-plugin-persistedstate
import { 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 是一个对象，包含 type（'direct' 或 'patch'）和 key // state 是 Store 的当前状态 console.log('State mutated:', mutation, state);
});
4. 使用 TypeScript 进行类型安全
如果你在使用 TypeScript，Pinia 提供了强大的类型支持，确保你的代码是类型安全的。你可以为 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