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

},

],

}

})

效果:

相关推荐
高斯林.神犇4 分钟前
javaWeb基础
前端·chrome
用户21411832636028 分钟前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
南屿im1 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript
charlie1145141911 小时前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析
HWL56791 小时前
输入框内容粘贴时   字符净化问题
前端·vue.js·后端·node.js
梦6501 小时前
JQ 的 AJAX 请求方法
前端·ajax
ObjectX前端实验室1 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js
IT_陈寒1 小时前
「JavaScript 性能优化:10个让V8引擎疯狂提速的编码技巧」
前端·人工智能·后端
ObjectX前端实验室2 小时前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js
ObjectX前端实验室2 小时前
【react18原理探究实践】调度器(Scheduler)原理深度解析
前端·react.js