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

},

],

}

})

效果:

相关推荐
李少兄1 小时前
HTML 表单控件
前端·microsoft·html
java水泥工2 小时前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
学习笔记1012 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19432 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧3 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台3 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1003 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc4 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅5 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅5 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby