Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码

栀子花开是离别

一、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 字段用于配置持久化存储的策略。
常见配置项
配置项类型默认值描述enabledbooleanfalse是否启用持久化存储。keystringStore 名称存储在 Storage 中的键名。storageStoragelocalStorage存储方式，可选 localStorage 或 sessionStorage。pathsstring[]undefined选择性持久化某些字段（不设置则默认存储全部）。serializerobject内置 JSON 序列化器自定义序列化器，包括 serialize 和 deserialize。
4. 示例：选择性持久化字段

如果只想持久化 name 字段：

1. persist: {
   
2.   enabled: true,
   
3.   strategies: [
   
4.     {
   
5.       key: 'user',
   
6.       storage: localStorage,
   
7.       paths: ['name'], // 只持久化 `name`
   
8.     },
   
9.   ],
   
10. },

复制代码

5. 示例：自定义序列化器

如果需要自定义存储格式（如 Base64）：

1. persist: {
   
2.   enabled: true,
   
3.   strategies: [
   
4.     {
   
5.       key: 'user',
   
6.       storage: sessionStorage,
   
7.       serializer: {
   
8.         serialize: (value) => btoa(JSON.stringify(value)), // Base64 编码
   
9.         deserialize: (value) => JSON.parse(atob(value)),  // Base64 解码
   
10.       },
    
11.     },
    
12.   ],
    
13. },

复制代码

三、如何在项目中使用 Pinia 和 PersistedState


1. 安装 Pinia 和 PersistedState 插件

1. npm install pinia pinia-plugin-persistedstate

复制代码

2. 配置 Pinia

在项目的入口文件（如 main.ts 或 main.js）中：

1. import { createApp } from 'vue';
   
2. import { createPinia } from 'pinia';
   
3. import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
   
4. import App from './App.vue';
   
5. 
   
6. const app = createApp(App);
   
7. 
   
8. // 创建 Pinia 实例
   
9. const pinia = createPinia();
   
10. 
    
11. // 使用持久化插件
    
12. pinia.use(piniaPluginPersistedState);
    
13. 
    
14. app.use(pinia);
    
15. app.mount('#app');

复制代码

3. 创建 Store

创建一个持久化的 Pinia store，例如 src/stores/user.ts：

1. import { defineStore } from 'pinia';
   
2. 
   
3. export const useUserStore = defineStore('user', () => {
   
4.   const name = ref('王强')
   
5.   const age = ref(25)
   
6.   function setName(name: string) {
   
7.         name.value = name
   
8.   }
   
9.   return {
   
10.           name,
    
11.           age,
    
12.           setName
    
13.   }
    
14. },
    
15.   {
    
16.     persist: {
    
17.       storage: sessionStorage
    
18.     }
    
19.   }
    
20. )

复制代码

4. 使用 Store


1. 读取

1. <template>
   
2.   <div>
   
3.     <p>用户名：{{ userStore.name }}</p>
   
4.     <button @click="updateName">修改用户名</button>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script lang="ts" setup>
   
9. import { useUserStore } from '@/stores/user';
   
10. const userStore = useUserStore();
    
11. 
    
12. const updateName = () => {
    
13.   userStore.setName('张三');
    
14. };
    
15. </script>

复制代码

2. 更新

1. // 直接修改
   
2. userStore.name = '张三'
   
3. 
   
4. // 通过 $patch({}) 批量对象修改
   
5. userStore.$patch({
   
6. name: '张三',
   
7. age:19
   
8. })
   
9. 
   
10. // 通过 $patch((state) => {}) 回调函数修改
    
11. userStore.$patch((state) => {
    
12.     state.name = '张三'
    
13.     state.age = 19
    
14. })
    
15. 
    
16. // 通过 action 修改
    
17. userStore.setName('张三');

复制代码

3. 重置

将 store 中 state 重置为初始值

1. userStore.$reset()

复制代码

4. 解构 storeToRefs

解构会丢失响应式，需要用 storeToRefs 转为响应式

1. import { storeToRefs } from 'pinia'
   
2. const userStore = useUsersStore()
   
3. const { name } = storeToRefs(userStore)

复制代码

5. 监听 state 变化

监听state变化

1. /**
   
2. * 当 state 中的值任意一个发生变化的时候，就会触发该函数
   
3. *
   
4. * args: 里面会记录新旧值
   
5. * state：就是当前操作的 state 的实例
   
6. * options: 是一个对象，比如 detached，这是一个 boolean 参数，当这个参数为 true 时，表明即使当前组件销毁后，也继续监控 state 里面值的变化，可选
   
7. */
   
8. userStore.$subscribe((args, state) => {
   
9.   console.log('args', args)
   
10.   console.log('state', state)
    
11. },{
    
12.   detached: true
    
13. })

复制代码

6. 监听 action 调用

当调用函数的时候，就会触发该函数

1. /**
   
2. * 当调用 actions 里面的函数的时候，就会触发改函数
   
3. *
   
4. * args：接收参数，里面封装了多个 api：
   
5. *      args.after：当 $onAction 里面的逻辑执行完成之后才会执行 args.after 函数逻辑，所以 args.after 放置的位置于执行顺序无关
   
6. *      args.onError：当调用 actions 里面的函数发生错误时，args.onError 函数也会执行
   
7. *      args.args：接收调用 actions 里面的函数传递的参数，是一个数组
   
8. *      args.name：执行的 actions 里面的函数的名称
   
9. * detached: 这是一个 boolean 参数，当这个参数为 true 时，表明即使当前组件销毁时，也继续监控 actions 里面的函数调用，可选
   
10. */
    
11. userStore.$onAction((args) => {
    
12.     args.after(() => console.log("args.after", "===="));
    
13.     console.log("args", args);
    
14. }, true);

复制代码

总结

到此这篇关于Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的文章就介绍到这了,更多相关Vue3+Vite引入pinia和pinia-plugin-persistedstate内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331159tgy.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！