pinia插件持久化pinia状态
- 只有在对 Pinia store 中的状态(共享数据)进行修改并触发变化时，持久化配置才会生效。比如，当你在代码中直接修改了状态，或者调用了 store 中的 action 来修改状态时，变化才会被存储
- 为什么要使用持久化插件
当没有使用持久化插件的时候，如果刷新页面，那些共享数据会重置到初始值
数据保存: 有时候你可能希望用户在关闭页面或者刷新后，之前的一些设置或者状态仍然存在。这个插件可以把Pinia的状态自动保存到本地存储中，比如浏览器的LocalStorage。这样用户再次访问你的页面时，之前保存的状态可以被恢复。
用户体验: 对于一些需要记住用户选择或者偏好的应用场景，使用这个插件可以提升用户体验。比如，用户在你的网站上做了一些设置，然后关闭了页面，再次访问时能看到之前设置过的内容，这可以让用户感觉更加顺畅和方便。
简化开发: 这个插件简化了数据持久化的处理。它提供了一种便捷的方式，让你无需手动编写大量的逻辑来保存和恢复状态。
pinia持久化插件官网
https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/why.html插件安装
- 在安装插件之前要确保已经安装了pinia，因为是基于pinia的
//pinia官网
https://pinia.vuejs.org/zh/getting-started.html
//安装pinia命令
yarn add pinia
# 或者使用 npm
npm install pinia- 持久化插件安装
npm i pinia-plugin-persistedstate
或
yarn add pinia-plugin-persistedstate- 将插件添加到pinia实例上
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {createPinia} from "pinia";
import piniaPluginPersist from 'pinia-plugin-persist'//导入持久化插件
//.use(createPinia().use(piniaPluginPersist))先创建pinia实例，在实例上引用持久化插件
createApp(App).use(createPinia().use(piniaPluginPersist)).use(router).mount('#app')
//或者这样写
const pinia = createPinia();//创建pinia实例
pinia.use(piniaPluginPersist);//在引入持久化插件
createApp(App).use(pinia).use(router).mount('#app')//在挂载
- 配置持久化插件
关键语句: persist: true
- 下面的 Store 将使用默认持久化配置保存
//store.js文件中
//1.选项式
export const useStoreState = defineStore('store',{
state: ()=> {
return{
name: '张三',
}
},
persist: true,//持久化配置
})
//组合式
export const useStoreState = defineStore('store',
() => {
const name = ref('张三');
return {name}
},
{
persist: true //开启
}
)
配置
上面了写了最基础的设置，但是还不会触发持久化配置，
重点：只有在对 Pinia store 中的状态(共享数据)进行修改并触发变化时，持久化配置才会生效。比如，当你在代码中直接修改了状态，或者调用了 store 中的 action 来修改状态时，变化才会被存储
下面是一个基本使用案例
- 使用
//store.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter',{
state: () => ({
count: 0,
name : '张三',
// 其他的状态...
}),
persist: { //这个写成对象实行，可以进行更多的配置
enabled: true,//开启持久化，默认将所有的状态(共享参数)全部存入到session中
}
});
//组件使用store
<template>
<div>
<p>共享参数count值为: {{ count }}</p>
<button @click="increment">直接修改共享参数count值</button>
</div>
</template>
<script setup>
import {useCounterStore} from "@/store";
import {storeToRefs} from "pinia";
//获取store实例
const store = useCounterStore();
//因为接收的值不是响应式，使用storeToRefs转为响应式，相当于ref
const count = storeToRefs(store);
//修改共享参数的函数
const increment = function () {
store.count++;
}
</script>
- 当点击按钮时，共享参数count值就会被修改
- count值被修改时，则pinia持久化才开始生效
- 在浏览器打开开发者模式，找到Application选项，在找到Session会话
- 这时你会发现所有的store状态(共享参数)都存入到了session中
如图：
配置知识点
enabled
关键句： persist:{enabled:true}
- 这一句作为defineStore第二个参数中的属性
- persist: {enabled: false,}
重点:如果enabled值为true，store持久化开启，默认将store中所有的状态全部进行持久化，默认储存到session中
如果enabled值为false，store持久化关闭
export const useCounterStore = defineStore({
id: 'counter',
state: () => ({
count: 0,
}),
// 禁用持久化
persist: {
enabled: false,
},
});
key
关键字: key
- 接着之前案例的截图
session会话中找到key，key就是持久化存储的名字，
发现存储的名字就是defineStore函数中的第一个参数，也就是这个store模块的id，唯一的
- key的作用就是将存储到key中的名字改成自己想要的名字
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{
key: 'myName',//这里就是session中key改为自己的想要的名称
},
]
}
});
通过上面的案例发现多了一个 strategies: 元素
strategies元素
关键句： strategies:[{}]
- 作用：允许你配置多个持久化策略
- 意思就是说，我可以到这个属性里面做事情，比如我只要一个值持久化，或者我指定值存到其他地方如：local storage 里面不存储到session中，等等........
- 你会发现这个strategies属性是一个数组，数组中装着很多对象，在接着上面的第二点，因该能猜到，可以对不同的状态(共享数据)进行持久化策略
- 比如我现在有两个状态(count,name),当发生修改后，count我想存入session中，而name值我想存入local Storage中，使用这个属性就可以做到了
paths
关键句: paths:[]
- 指定多个或一个状态(共享数据)进行持久化
//只要一个参数持久化
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{
key: 'myName',//这里就是session中key改为自己的想要的名称
paths: ['count'],//指定只要一个状态(共享参数)持久化
},
]
}
});
//多个参数持久化
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{
key: 'myName',//这里就是session中key改为自己的想要的名称
paths: ['count','name'],//指定多个状态(共享参数)持久化
},
]
}
});storage
关键句：storage: localStorage,
pinia持久化装填默认是在sessionStorage中的，可以通过 storage改变它，让他存入到localStorage
意思就是说我们的状态(共享参数)默认的时候是存在session中的，但是我想存到localStorage中，就需要使用到storage这个属性了
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{
key: 'myName',
storage: localStorage,//将状态存入到localStorage中
paths: ['count'],//指定一个状态(共享参数)持久化
},
]
}
});上面的代码意思就是指定count值存入到localStorage中
也可以指定多个状态(共享参数)
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{
key: 'myName',
storage: localStorage,//将状态存入到localStorage中
paths: ['count','name'],//指定多个状态(共享参数)持久化
},
]
}
});
也可以分别指定参数到不同的地方，下面将count放入在local storage中，name放在session storage中
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '张三'
// 其他的状态...
}),
persist: {
enabled: true,
key: 'myCounterKey', // 添加 key 属性并指定键名
strategies: [
{ //将count状态存入到localStorage中
key: 'myName',
storage: localStorage,//将状态存入到localStorage中
paths: ['count'],//指定多个状态(共享参数)持久化
},
{//将name状态存入到sessionStorage中
storage:sessionStorage,
key: 'myName',
paths:['name']
},
]
}
});首先到local storage中查看count值:
再到session storage中查看name值
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
