Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的方法代码 |
||||||||||||||||||||||||
一、Pinia1. 简介Pinia 是 Vue.js 官方推荐的状态管理库，是 Vuex 的轻量替代品，设计更简单、功能更强大，并且支持模块化和 TypeScript 。 2. Pinia 的主要特点
二、Pinia Plugin PersistedState1. 简介pinia-plugin-persistedstate 是 Pinia 的一个插件，用于持久化存储状态 。它将 store 的状态保存在 localStorage 或 sessionStorage 中，即使页面刷新或关闭后再次打开，状态依然会被恢复 。 2. 插件特点
3. PersistedState 配置项persist 字段用于配置持久化存储的策略 。 常见配置项
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 和 PersistedState1. 安装 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. 使用 Store1. 读取<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);总结到此这篇关于Vue3+Vite项目中引入pinia和pinia-plugin-persistedstate的文章就介绍到这了,更多相关Vue3+Vite引入pinia和pinia-plugin-persistedstate内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！ |
