插件能做什么
在 Pinia 中，可以为仓库添加插件，通过添加插件能够扩展以下的内容：
- 为 store 添加新的属性；
- 定义 store 时增加新的选项；
- 为 store 增加新的方法；
- 包装现有的方法；
- 改变甚至取消 action；
- 实现副作用，如 本地存储；
- 仅 应用插件于特定 store；
自定义插件
-
首先建议插件单独拿一个目录来存放，一个插件就是一个方法：
export function myPiniaPlugin1() { // 给所有的仓库添加了一条全局属性 return { secret: "the cake is a lie", }; } export function myPiniaPlugin2(context) { // console.log(context); const { store } = context; store.test = "this is a test"; } /** * 给特定的仓库来扩展内容 * @param {*} param0 */ export function myPiniaPlugin3({ store }) { if (store.$id === "counter") { // 为当前 id 为 counter 的仓库来扩展属性 return { name: "my name is pinia", }; } } /** * 重置仓库状态 */ export function myPiniaPlugin4({ store }) { // 可以将初始状态深拷贝一份 const state = deepClone(store.$state); store.reset = () => { store.$patch(deepClone(state)); }; } -
每个插件在扩展内容时，会对所有的仓库进行内容扩展，如果想要针对某一个仓库进行内容扩展，可以通过 context.store.$id 来指定某一个仓库来扩展内容；
-
插件书写完毕后，需要通过 pinia 实例对插件进行一个注册操作；
// 引入自定义插件 import { myPiniaPlugin1, myPiniaPlugin2, myPiniaPlugin3, myPiniaPlugin4 } from "./plugins"; pinia.use(myPiniaPlugin1); pinia.use(myPiniaPlugin2); pinia.use(myPiniaPlugin3); pinia.use(myPiniaPlugin4);
pinia 持久化存储
-
安装持久化插件 pinia-plugin-persistedstate，官网；
npm i pinia-plugin-persistedstate -
将插件添加到 pinia 实例上；
import { createPinia } from "pinia" // 引入 pinia import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // 引入持久化插件 const pinia = createPinia() // 创建 pinia 实例 pinia.use(piniaPluginPersistedstate) // 将插件添加到 pinia 实例上 export default pinia // 导出 pinia 用于 main.js 注册 -
默认持久化配置：创建 Store 时，将 persist 选项设置为 true，整个 Store 将使用默认持久化配置保存；
- 使用 localStorage 进行存储；
- store.$id 作为 storage 默认的 key；
- 使用 JSON.stringify/JSON.parse 进行 序列化/反序列化；
- 整个 state 默认将被持久化；
import { defineStore } from "pinia" const useUserInfoStore = defineStore('userInfo', { state: () => ({ username:'赫赫', age: 23, like: 'girl', }), getters: { // ........ }, action：{ // ......... }, persist: true, }) export default useUserInfoStore -
自定义持久化配置：将一个对象传递给 Store 的 persist 属性来配置持久化；
- key：存储名称；
- storage：存储方式；
- path：用于指定 state 中哪些数据需要被持久化，[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state；
- …
import { defineStore } from "pinia" const useUserInfoStore = defineStore('userInfo', { state: () => ({ username:'赫赫', age: 23, like: 'girl', obj:{ money: 100, friend: 10 } }), getters: { // ........ }, action：{ // ......... }, persist: { key: 'piniaStore', storage: sessionStorage, paths: ['username', 'like','obj'], }, }) export default useUserInfoStore
真题解答
题目：是否给 Pinia 添加过插件？具体添加的方式是什么？
参考答案：
- 在 Pinia 中可以非常方便的添加插件；一个插件就是一个函数，该函数接收一个 context 上下文对象，通过 context 对象可以拿到诸如 store、app 等信息；
- 每个插件在扩展内容时，会对所有的仓库进行内容扩展，如果想要针对某一个仓库进行内容扩展，可以通过 context.store.$id 来指定某一个仓库来扩展内容；
- 插件书写完毕后，需要通过 pinia 实例对插件进行一个注册操作；
- 另外，还可以使用一些第三方插件，直接通过 npm 安装使用即可，安装完毕后，使用方法和自定义插件是一样的，具体的使用方法一定要参阅文档；
打赏作者
您的打赏是我前进的动力
微信
支付宝
Pinia 快速入门
上一篇
评论
