Pinia中如何实现数据持久化操作

使用vue3中的pinia,我们可以在多个页面间共享数据,但是一旦我们关闭或刷新页面,这些数据就会丢失,因此,我们需要有一种数据持久化的解决方案。在记录vue3

使用vue3中的pinia,我们可以在多个页面间共享数据,但是一旦我们关闭或刷新页面,这些数据就会丢失,因此,我们需要有一种数据持久化的解决方案。

在记录vue3中使用数据可持久化方式的同时,我们顺便记录一下,在webstorm中编写uni-app代码的一个过程。

一、首先,点击安装vue3(一般这个步骤,我们都需要通过下载压缩包的方式来完成初始化安装)

打开package.json,我们发现,默认uni-app为我们预装的vue3版本为:3.2.45。

二、使用命令:npm install vue@latest,升级Vue3的版本至最新的版本:3.3.4。

此时命令行提示:需要npm audit fix --force,但是经测试,这个命令一旦执行,就跑不起来了。

三、安装pinia

理论上,此时可使用命令 npm install pinia 来直接安装pinia的默认最新版本:2.1.6。但是测试发现,采用将pinia安装在vue上时会发现,控制台会报错:

Uncaught SyntaxError: The requested module '/node_modules/pinia/node_modules/vue-demi/lib/index.mjs?v=f43e2f61' does not provide an export named 'hasInjectionContext' 

在小程序的编译器中也会报错:

"hasInjectionContext" is not exported by "node_modules/pinia/node_modules/vue-demi/lib/index.mjs", imported by"node_modules/pinia/dist/pinia.mjs".
at ../node_modules/pinia/dist/pinia.mjs:6:9

猜测可能是版本不匹配的原因,网上有说vue-demi的版本太低的缘故,通过命令:npm list vue-demi 我们查看,我们已安装的 vue-demi的版本号为:0.14.6,且 vue-demi是在安装pinia时附带安装的。

经查询:Vue Demi是一款可以同时支持Vue2和3的通用的Vue库的开发工具,一般当要创建一个Vue插件/库时,只需将vue-demi安装为依赖项并将其导入,然后就能让软件包就会变得通用。 但实测升级vue-demi的最新版本就是0.14.6,所以通过升级vue-demi的方法不可行。

网上有一种可行的方案是降低pinia的版本号:

在这里插入图片描述
这里,当我们逐渐降低版本至2.0.36时,该报错消失,编译正常。至于具体什么原因,留待后续再研究,此处先记录一下。

即,安装pinia的命令应该是:npm install pinia@2.0.36 --legacy-peer-deps

目前也只有该方法可行。

四、创建一个测试的store

创建测试文件 src/stores/count.js

import {defineStore} from "pinia";
import {computed, ref} from "vue";export const useCountStore = defineStore('count', () => {const num = ref(0)const doubleNum = computed(() => {return num.value * 2})const add = () => {num.value++}return {num, doubleNum, add}
})

在app.vue文件中进行测试:

    <view>当前值为:{{ num }}-- {{doubleNum}}</view><button @click="add">点击num+1</button>
</template><script setup>
import {useCountStore} from "../../stores/count";
import {storeToRefs} from "pinia";const countStore = useCountStore()
const {num, doubleNum} = storeToRefs(countStore)
const {add} = countStore
</script>
此时,如果有多个页面,那么数据在多个页面之间是可以保持的,但是如果我们一旦刷新页面,或者关闭浏览器再打开,则会发现数据会丢失。此时,我们就需要一个数据持久化的解决方案。

数据持久化的原因,即将数据写入客户端本地进行存储和读取,一般使用的是localStore和sessionStore,在小程序端,需要使用setStore的方式进行存储。理论上,我们可以自己动手去实现这个功能,但是在这块,已有现成的成熟的三方库可以使用。

在选择库的时候,第一次我选择了pinia-plugin-persist这个库,应该感觉其名称比较精简,不过后来发现,pinia-plugin-persist这款插件很久没维护了,其次文档非常简略,于是,又切换为大家都在使用的:pinia-plugin-persistedstate,这款库的文档很详细(文档地址:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/)。

安装命令:npm i pinia-plugin-persistedstate

使用起来也很方便,如:简单开启数据持久化的方式,在main.js文件中进行安装:

import {createPinia} from "pinia";
import piniaPersist from 'pinia-plugin-persistedstate'const pinia = createPinia();
pinia.use(piniaPersist)

在count.js文件中,添加第三个参数:

{persist:true
}

即可简单开启,数据的可持久化,默认数据是存储在localStore中的,因此关闭浏览器再打开,数据也是存在的。

但是,当我们将vue用于开发小程序时,以往的localStore存储方案就行不通了。此时,我们就需要重新配置数据持久化。参考如下:

{// 数据持久化配置persist: {// enabled: true,// 调整为兼容多端的APIstorage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)}}}

大家可以根据自己的实际开发场景,来完成自己的pinia数据持久化配置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一体化运维监控:数据中心运维可视化的指挥中枢

在当今数字化世界中&#xff0c;数据中心的运维管理对于企业的稳定运营至关重要。然而&#xff0c;传统的运维管理方式往往面临着许多挑战&#xff0c;如多系统整合困难、运维效能低下等。为此&#xff0c;监控易品牌推出了一体化运维管理软件&#xff0c;旨在构建数据中心可视…

【App 抓包提示网络异常怎么破?】

背景 当你测试App的时候,想要通过Fiddler/Charles等工具抓包看下https请求的数据情况,发现大部分的App都提示网络异常/无数据等等信息。以“贝壳找房”为例: 455 x 705 Fiddler中看到的请求是这样的: 619 x 215 你可能开始找证书的问题:是不是Fiddler/Charles的证书没有…

sqlalchemy的部分函数合集

func.concat func.group_concat func.find_in_set func.sum func.left func.month func.round func.avg func.rpad func.ifnull func.replace func.date_format CONCAT 函数&#xff1a;将两个或多个字符串连接在一起。例如&#xff1a; SELECT CONCAT(Hello, , World) AS r…

单元测试Testng

Test官网介绍 tentng官网 TestNG - Download Current Release and Beta Versions Maven <dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>7.6.1</version><scope>test</scope> …

数字化工厂:连接、集成与数据融合

随着科技的不断发展&#xff0c;数字化工厂管理系统逐渐成为制造业的重要趋势。数字化工厂的核心在于连接、集成与数据融合&#xff0c;通过这些技术手段&#xff0c;实现对设备、生产线、工厂、供应商、产品、客户等各个环节的全面优化&#xff0c;提升企业的生产效率和产品质…

NET-MongoDB的安装使用

一&#xff0e;下载 MongoDB 点击 Select package 选择自己所需版本后点击下载&#xff0c;本文选用Windows 6.0版本以上 二、配置MongoDB 在 Windows 上&#xff0c;MongoDB 将默认安装在 C:\Program Files\MongoDB 中。 将 C:\Program Files\MongoDB\Server\version_numbe…

安装python虚拟环境

什么是虚拟环境&#xff1a; 虚拟环境的意义&#xff0c;就如同 虚拟机 一样&#xff0c;它可以实现不同环境中Python依赖包相互独立&#xff0c;互不干扰。 环境准备 安装python &#xff08;到官网下载Download Python​配置环境变量&#xff0c;cmd进入命令行输入 python…

王道计网:数据链路层

一、导论 将网络层的数据报分组封装成帧。 本质上是数据链路层封装之后&#xff0c;在物理层传输bit流&#xff0c;中间站点又会向上到数据链路层&#xff0c;这是一个实际过程&#xff0c;但是在单独考虑数据链路层时&#xff0c;我们可以忽略经过的物理层&#xff0c;直接认为…

算法通关村|黄金挑战|K个一组进行反转

K个一组进行反转 1.头插法 public ListNode reverseKGroup(ListNode head, int k) {ListNode dummyNode new ListNode(0);dummyNode.next head;ListNode cur head;// 计算链表长度int len 0;while (cur ! null) {len;cur cur.next;}// 计算有几组int n len / k;ListNod…

js实现将文本生成二维码(腾讯云cos)

示例 页面代码 import { getQCodeUrl } from /utils/cosInstance; import { PageContainer } from ant-design/pro-components; import { Access, useAccess } from umijs/max; import { Button, Image } from antd; import { useState } from react;const AccessPage: Reac…

16 用于NOMA IoT网络上行链路安全速率最大化的HAP和UAV协作框架

文章目录 摘要相关模型仿真实验仿真结果 摘要 优化无人机到HAP的信道分配、用户功率和无人机三维位置来研究上行安全传输解决非凸问题&#xff0c;采用K-means聚类算法&#xff0c;将成对的用户划分成不同的组&#xff0c;每个簇可以有相应的无人机服务&#xff0c;然后将构造…

vue3-admin-element框架登录如何修改?

1、找到vite.config.js文件 配置反向代理 2、找到src文件下的user.js文件 3、找到views文件下的login文件 打开找到comp文件夹找到LoginFrom.vue页面进去 把这个改成自己的账户数据&#xff08;密码不一致自行更改&#xff09; 4、找到store文件下的modules下的user.js 5、找到…

物联网与 Linux 的相爱相生

Linux 无疑将在物联网中扮演一个关键角色&#xff0c;但是其光彩将与其它的一些分享。 随着 Canonical 重新关注于赢利和新技术&#xff0c;我们中的一些人发现我们正在思考 Linux 未来将走向何方&#xff0c;IoT&#xff08;物联网&#xff09;是否是 Linux 的未来&#xff1…

虹科 | 解决方案 | 汽车示波器 学校教学方案

虹科Pico汽车示波器是基于PC的设备&#xff0c;特别适用于大课堂的教学、备课以及与师生的互动交流。老师展现讲解波形数据&#xff0c;让学生直观形象地理解汽车的工作原理 高效备课 课前实测&#xff0c;采集波形数据&#xff0c;轻松截图与标注&#xff0c;制作优美的课件&…

pytest-yaml 测试平台-3.创建执行任务定时执行用例

前言 当项目用例编写完成后&#xff0c;需设置执行策略&#xff0c;可以用到定时任务设置每天几点执行。或者间隔几个小时执行一次。 创建定时任务 创建任务 勾选需要执行的项目以及运行环境 触发器可以支持2种方式&#xff1a;interval 间隔多久触发和 cron 表达式定时执行…

甲骨文真的要开放Java EE?

甲骨文表示&#xff0c;目前正在与可能的几个候选基金会&#xff0c;以及许可证持有者和社区在进行谈判。随着Java EE 8平台的确定&#xff0c;甲骨文在周四表示&#xff0c;目前正在考虑将Java Enterprise Edition技术转移到开源社区。 甲骨文在其博客中说道&#xff0c;这次的…

JAVA毕业设计104—基于Java+Springboot+Vue的医院预约挂号小程序(源码+数据库)

基于JavaSpringbootVue的医院预约挂号小程序(源码数据库)104 一、系统介绍 本系统前后端分离带小程序 小程序&#xff08;用户端&#xff09;&#xff0c;后台管理系统&#xff08;管理员&#xff0c;医生&#xff09; 小程序&#xff1a; 预约挂号&#xff0c;就诊充值&…

【LeetCode:1465. 切割后面积最大的蛋糕 | 贪心 + 排序】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

YTM32的增强型定时器eTMR外设模块详解

文章目录 eTMR外设简介eTMR工作机制系统框图引脚与信号计数器与时钟源输出比较模式PWM模式通道配对通道对的互补输出&#xff08;Complementary Mode&#xff09;双缓冲输出PWM&#xff08;Double Switch&#xff09;错误检测机制&#xff08;Fault Detection&#xff09; 输入…

SolidJs与React区别

1、写法上 声明变量 import { createSignal, type Component, createMemo } from solid-js;const [name, setName] createSignal<string>();useState 改名成 createSignal从直接使用name变为通过方法调用name() createSignal 用来创建响应式数据&#xff0c;它可以跟…