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

},

],

}

})

效果:

相关推荐
太阳伞下的阿呆2 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny2 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴3 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔3 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔3 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔4 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6144 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止4 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军5 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安5 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js