Vue3 + Vite 项目引入 pinia 和 pinia-plugin-persistedstate
发布时间
阅读量：
阅读量
文章目录
-
-
一、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`
},
],
},
javascript
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 解码
},
},
],
},
javascript
三、如何在项目中使用 Pinia 和 PersistedState
1. 安装 Pinia 和 PersistedState 插件
npm install pinia pinia-plugin-persistedstate
bash2. 配置 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');
javascript
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
}
}
)
typescript
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>
html
2. 更新
// 直接修改
userStore.name = '张三'
// 通过 $patch({}) 批量对象修改
userStore.$patch({
name: '张三',
age:19
})
// 通过 $patch((state) => {}) 回调函数修改
userStore.$patch((state) => {
state.name = '张三'
state.age = 19
})
// 通过 action 修改
userStore.setName('张三');
javascript
3. 重置
将 store 中 state 重置为初始值
userStore.$reset()
javascript
4. 解构 storeToRefs
解构会丢失响应式，需要用 storeToRefs 转为响应式
import { storeToRefs } from 'pinia'
const userStore = useUsersStore()
const { name } = storeToRefs(userStore)
javascript
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
})
javascript
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);
js
全部评论 (0)
还没有任何评论哟~