pinia实现数据持久化插件pinia-plugin-persist-uni
在学习uniapp过程中，看到了pinia-plugin-persist-uni插件，以前面试过程中也有面试过说vuex数据刷新之前的数据就丢失了，之前回答的是把数据存储到数据库或者本地存储。pinia-plugin-persist-uni本质上数据也是本地存储。
1、安装
npm install pinia-plugin-persist-uni
2、使用
main.ts
import piniaPersist from 'pinia-plugin-persist-uni'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)
store文件
写法一：
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter',()=>{
const counter = ref(0)
const doubleCount = computed(()=>counter.value*2)
const increment = ()=>{
counter.value++
}
return {
counter,
doubleCount,
increment,
}
},{
persist: {
enabled: true,
strategies: [
{
key: 'aaa', // 存储的键名
storage: localStorage, // 存储方式，可以是 localStorage 或 sessionStorage
},
],
},
})
写法二
export const useCounterStore = defineStore('counter', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
actions: {
increment() {
this.counter++
},
},
persist: {
enabled: true,
strategies: [
{
key: 'counter', // 存储的键名
storage: localStorage, // 存储方式，可以是 localStorage 或 sessionStorage
},
],
}
})
效果：
