1.安装插件
yarn add pinia-plugin-persistedstate
2.引入插件
将插件导入文件pinia实例
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia();
store.use(piniaPluginPersistedstate);
export default store;
3.在需要数据持久化的模块使用
第一种用法
import { defineStore } from 'pinia';
export const useUserStore = defineStore('test', {
state: () => {
return{
message:'hello pinia-plugin-persistedstate'
}
},
getters: {
},
actions: {
},
persist: true //会默认存储到localStorage中
});
第二种用法
import { defineStore } from 'pinia';
export const useUserStore = defineStore('test', {
state: () => {
return{
message:'hello pinia-plugin-persistedstate'
}
},
getters: {
},
actions: {
},
persist: {
key: 'message',// 修改存储的键名，默认为当前 Store 的 id
storage: window.sessionStorage,//存储在sessionStorage
},
});每个元素的key是想要储存的数据变量名，storage可以写sessionStorage或者localStorage，此时，sessionStorage中的key就是变量名，value就是该变量的值