Vue3 + Vite 项目引入 pinia 和 pinia-plugin-persistedstate

news/2024/11/22 0:07:45/

文章目录

    • 一、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 的主要特点

  1. 简单易用:

    API 设计直观,与 Vue Composition API 深度结合。

  2. 支持模块化:

    每个 store 独立管理,减少全局 store 复杂性。

  3. 热更新:

    支持 HMR(Hot Module Replacement),开发时无需手动刷新。

  4. 支持 TypeScript:

    提供更好的类型推导和代码提示。

  5. 无依赖:

    不需要额外的插件或中间件,集成更轻松。

二、Pinia Plugin PersistedState

1. 简介

pinia-plugin-persistedstate 是 Pinia 的一个插件,用于持久化存储状态。它将 store 的状态保存在 localStorage 或 sessionStorage 中,即使页面刷新或关闭后再次打开,状态依然会被恢复。

2. 插件特点

  1. 支持存储到 localStorage 或 sessionStorage。
  2. 可选择性持久化某些 store 或字段。
  3. 集成简单,自动同步状态。
  4. 支持自定义序列化(如 JSON)和反序列化逻辑。

3. PersistedState 配置项

persist 字段用于配置持久化存储的策略。

常见配置项

配置项类型默认值描述
enabledbooleanfalse是否启用持久化存储。
keystringStore 名称存储在 Storage 中的键名。
storageStoragelocalStorage存储方式,可选 localStorage 或 sessionStorage。
pathsstring[]undefined选择性持久化某些字段(不设置则默认存储全部)。
serializerobject内置 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);

http://www.ppmy.cn/news/1548889.html

相关文章

MySQL-关键字执行顺序

&#x1f496;简介 在MySQL中&#xff0c;SQL查询语句的执行遵循一定的逻辑顺序&#xff0c;即使这些关键字在SQL语句中的物理排列可能有所不同。 &#x1f31f;语句顺序 (8) SELECT (9) DISTINCT<select_list> (1) FROM <left_table> (3) <join_type> JO…

对原jar包解压后修改原class文件后重新打包为jar

文章目录 背景三种修改方式1.POM中移除原jar中依赖的历史版本2.原jar它不使用pom依赖而是直接放在源码中再编译使用JarEditor 插件对源码进行修改(推荐)使用java-decompiler反编译后修改源码覆盖原class&#xff08;不好用-不推荐直接跳过&#xff09;提醒 参考资料-推荐阅读拓…

C# 反射与动态编程

文章目录 1.反射(Reflection)1.1 什么是反射?1.2 反射的基本操作1.2.1 获取类型信息1.2.2 获取成员信息1.3 调用成员1.4 实例化对象1.5 常见应用场景2.动态编程2.1 什么是动态编程?2.2 dynamic 关键字2.3 动态对象和 ExpandoObject2.4 动态编程的应用场景3.反射与动态编程的…

嵌入式学习-C嘎嘎-Day06

嵌入式学习-C嘎嘎-Day06 1. 什么是异常&#xff1f; 2. 抛出异常 3. 捕获异常 4. 标准异常族 5. 异常捕获技巧 5.1 捕获基类异常 5.2 多重捕获 1. 什么是异常&#xff1f; 异常是程序在运行期间产生的问题&#xff0c;即没有语法错误&#xff0c;出现的是逻辑错误&#xff0c;C…

使用MATLAB进行随机信号处理

MATLAB是一款强大的数学计算软件&#xff0c;广泛应用于工程、科学和经济等领域。其中&#xff0c;随机信号处理是MATLAB其中一个重要的应用领域。本文将探讨随机信号的基本概念、生成方法以及MATLAB中如何处理随机信号。 1.随机信号的基本概念 随机信号是指信号的大小或形状…

How to install rust in Ubuntu 24.04

How to install rust in Ubuntu 24.04 Install Install 可以采用如下命令安装rust curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh具体如下&#xff1a; lwkqwfys:~$ curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh info: downloading instal…

python基础知识(七)——写入excel

一、写入excel 写入数据到excel wb load_workbook("testcase_api_wuye.xlsx") #打开一个已经存在的excel文件 sh wb["register"] #识别某一个表单 sh.cell(row 2,column 8).value "pass" #写入数据&#xff0c;单元格的值赋值 wb.sav…

Kotlin深度面试题:协程、密封类和高阶函数

文章目录 知识回顾前言源码分析1.面试题目1&#xff1a;Kotlin中的协程与线程的区别是什么&#xff1f;如何在Android中使用协程进行异步编程&#xff1f;2.面试题目2&#xff1a;Kotlin中的扩展函数和扩展属性是什么&#xff1f;如何在Android开发中使用它们&#xff1f;3. 面…