文章目录
- 一、Pinia
- 1. 简介
- 2. Pinia 的主要特点
- 二、Pinia Plugin PersistedState
- 1. 简介
- 2. 插件特点
- 3. PersistedState 配置项
- 4. 示例:选择性持久化字段
- 5. 示例:自定义序列化器
- 三、如何在项目中使用 Pinia 和 PersistedState
- 1. 安装 Pinia 和 PersistedState 插件
- 2. 配置 Pinia
- 3. 创建 Store
- 4. 使用 Store
- 1. 读取
- 2. 更新
- 3. 重置
- 4. 解构 storeToRefs
- 5. 监听 state 变化
- 6. 监听 action 调用
一、Pinia
1. 简介
Pinia 是 Vue.js 官方推荐的状态管理库,是 Vuex 的轻量替代品,设计更简单、功能更强大,并且支持模块化和 TypeScript。
2. Pinia 的主要特点
-
简单易用:
API 设计直观,与 Vue Composition API 深度结合。
-
支持模块化:
每个 store 独立管理,减少全局 store 复杂性。
-
热更新:
支持 HMR(Hot Module Replacement),开发时无需手动刷新。
-
支持 TypeScript:
提供更好的类型推导和代码提示。
-
无依赖:
不需要额外的插件或中间件,集成更轻松。
二、Pinia Plugin PersistedState
1. 简介
pinia-plugin-persistedstate 是 Pinia 的一个插件,用于持久化存储状态。它将 store 的状态保存在 localStorage 或 sessionStorage 中,即使页面刷新或关闭后再次打开,状态依然会被恢复。
2. 插件特点
- 支持存储到 localStorage 或 sessionStorage。
- 可选择性持久化某些 store 或字段。
- 集成简单,自动同步状态。
- 支持自定义序列化(如 JSON)和反序列化逻辑。
3. PersistedState 配置项
persist 字段用于配置持久化存储的策略。
常见配置项
配置项 | 类型 | 默认值 | 描述 |
---|---|---|---|
enabled | boolean | false | 是否启用持久化存储。 |
key | string | Store 名称 | 存储在 Storage 中的键名。 |
storage | Storage | localStorage | 存储方式,可选 localStorage 或 sessionStorage。 |
paths | string[] | undefined | 选择性持久化某些字段(不设置则默认存储全部)。 |
serializer | object | 内置 JSON 序列化器 | 自定义序列化器,包括 serialize 和 deserialize。 |
4. 示例:选择性持久化字段
如果只想持久化 name 字段:
persist: {enabled: true,strategies: [{key: 'user',storage: localStorage,paths: ['name'], // 只持久化 `name`},],
},
5. 示例:自定义序列化器
如果需要自定义存储格式(如 Base64):
persist: {enabled: true,strategies: [{key: 'user',storage: sessionStorage,serializer: {serialize: (value) => btoa(JSON.stringify(value)), // Base64 编码deserialize: (value) => JSON.parse(atob(value)), // Base64 解码},},],
},
三、如何在项目中使用 Pinia 和 PersistedState
1. 安装 Pinia 和 PersistedState 插件
npm install pinia pinia-plugin-persistedstate
2. 配置 Pinia
在项目的入口文件(如 main.ts 或 main.js)中:
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
import App from './App.vue';const app = createApp(App);// 创建 Pinia 实例
const pinia = createPinia();// 使用持久化插件
pinia.use(piniaPluginPersistedState);app.use(pinia);
app.mount('#app');
3. 创建 Store
创建一个持久化的 Pinia store,例如 src/stores/user.ts:
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', () => {const name = ref('王强')const age = ref(25)function setName(name: string) {name.value = name}return {name,age,setName}
}, {persist: {storage: sessionStorage}}
)
4. 使用 Store
1. 读取
<template><div><p>用户名:{{ userStore.name }}</p><button @click="updateName">修改用户名</button></div>
</template><script lang="ts" setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();const updateName = () => {userStore.setName('张三');
};
</script>
2. 更新
// 直接修改
userStore.name = '张三'// 通过 $patch({}) 批量对象修改
userStore.$patch({name: '张三',age:19
})// 通过 $patch((state) => {}) 回调函数修改
userStore.$patch((state) => {state.name = '张三'state.age = 19
})// 通过 action 修改
userStore.setName('张三');
3. 重置
将 store 中 state 重置为初始值
userStore.$reset()
4. 解构 storeToRefs
解构会丢失响应式,需要用 storeToRefs 转为响应式
import { storeToRefs } from 'pinia'
const userStore = useUsersStore()
const { name } = storeToRefs(userStore)
5. 监听 state 变化
监听state变化
/*** 当 state 中的值任意一个发生变化的时候,就会触发该函数* * args: 里面会记录新旧值* state:就是当前操作的 state 的实例* options: 是一个对象,比如 detached,这是一个 boolean 参数,当这个参数为 true 时,表明即使当前组件销毁后,也继续监控 state 里面值的变化,可选*/userStore.$subscribe((args, state) => {console.log('args', args)console.log('state', state)
},{detached: true
})
6. 监听 action 调用
当调用函数的时候,就会触发该函数
/*** 当调用 actions 里面的函数的时候,就会触发改函数** args:接收参数,里面封装了多个 api:* args.after:当 $onAction 里面的逻辑执行完成之后才会执行 args.after 函数逻辑,所以 args.after 放置的位置于执行顺序无关* args.onError:当调用 actions 里面的函数发生错误时,args.onError 函数也会执行* args.args:接收调用 actions 里面的函数传递的参数,是一个数组* args.name:执行的 actions 里面的函数的名称* detached: 这是一个 boolean 参数,当这个参数为 true 时,表明即使当前组件销毁时,也继续监控 actions 里面的函数调用,可选*/
userStore.$onAction((args) => {args.after(() => console.log("args.after", "===="));console.log("args", args);
}, true);