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