当前位置: 首页 > news >正文

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数据持久化配置。

相关文章:

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

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

【owt-server】RTC视频接收调用流程学习笔记1: Call::CreateVideoReceiveStream 前后

WebRTC源码分析——Call模块 大神提到,call模块是在worker线程创建的。主要创建接收、发送流Call模块是WebRTC会话中不可缺少的一个模块,一个Call对象可以包含多个发送/接收流,且这些流对应同一个远端端点,并共享码率估计。 call中通过webrtc::VideoReceiveStream::Config …...

淘宝商品链接获取淘宝商品评论数据(用 Python实现淘宝商品评论信息抓取)

在网页抓取方面&#xff0c;可以使用 Python、Java 等编程语言编写程序&#xff0c;通过模拟 HTTP 请求&#xff0c;获取淘宝多网站上的商品详情页面评论内容。在数据提取方面&#xff0c;可以使用正则表达式、XPath 等方式从 HTML 代码中提取出有用的信息。值得注意的是&#…...

十九、类型信息(1)

本章概要 为什么需要 RTTI RTTI&#xff08;RunTime Type Information&#xff0c;运行时类型信息&#xff09;能够在程序运行时发现和使用类型信息 RTTI 把我们从只能在编译期进行面向类型操作的禁锢中解脱了出来&#xff0c;并且让我们可以使用某些非常强大的程序。对 RTTI …...

十八、字符串(3)

本章概要 正则表达式 基础创建正则表达式量词CharSequencePattern 和 Matcherfinde()组&#xff08;Groups&#xff09;start() 和 end()Pattern 标记split()替换操作reset()正则表达式与 Java I/0 正则表达式 很久之前&#xff0c;_正则表达式_就已经整合到标准 Unix 工具…...

基于SSM的酒店预约及管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…...

MIxformerV2的onnx和tensorrt加速

MIxformerV2的onnx和tensorrt加速 注意事项 地址&#xff1a;github地址 注意事项 转换成onnx模型之前&#xff0c;最好现简化算法的源代码&#xff0c;使其结构干净。因为在进行onnx转换后&#xff0c;可能在进行onnx→trt时算子不匹配&#xff0c;这时就需要去查看模型的源…...

Kotlin 中let 、run 、with、apply、also的用法与区别

实例代码 User(val userName:String,val age:Int){fun printName(){println(userName)}fun getUserName():String{return userName}} let 函数 let 函数常用来与对象的空判断一起用&#xff0c;起到作用于的限定效果。let 函数最后一行返回值。&#xff08;比如实例需要let函…...

PHP函数的定义与最简单后门原理

PHP函数的定义与最简单后门原理 文章目录 PHP函数的定义与最简单后门原理函数的定义函数调用的过程变量的范围局部变量全局变量 可变函数动态函数 PHP 最简单后门原理分析 函数的定义 使用function关键字来定义一个函数定义函数的函数名避开关键字形式参数是传递映射的实际参数…...

PlantSimulation访问本地Excel文件的方法

PlantSimulation访问本地Excel文件的方法 PlantSimulation访问本地Excel文件的方法PlantSimulation访问本地Excel文件的方法 //Param StatusTable,T_DataTable:object var T_DataTable:object:=DataTable IF NOT isComputerAccessPermittedMESSageBox("计算机访问被阻止,…...

使用微PE工具箱制作winU盘启动盘~重装系统

1.准备一个大于8G的U盘&#xff0c;为了保证传输和安装速度请确保U盘的质量。 2.鼠标右键点击U盘&#xff0c;进行格式化&#xff1a; 3.下载微PE工具箱&#xff1a; 微PE工具箱 - 下载 4.安装微PE工具箱&#xff1a;选择安装到U盘 5.选择U盘后&#xff0c;开始安装&#xf…...

漏洞复现-jquery-picture-cut 任意文件上传_(CVE-2018-9208)

jquery-picture-cut 任意文件上传_&#xff08;CVE-2018-9208&#xff09; 漏洞信息 jQuery Picture Cut v1.1以下版本中存在安全漏洞CVE-2018-9208文件上传漏洞 描述 ​ picture cut是一个jquery插件&#xff0c;以友好和简单的方式处理图像&#xff0c;具有基于bootstrap…...

Golang Websocket框架:实时通信的新选择

前言 在现代应用程序中&#xff0c;实时通信已经成为了一种必需的特性。而Websocket是一种在客户端和服务器之间建立持久连接的协议&#xff0c;可以实现实时的双向通信。Golang作为一门高效且简洁的语言&#xff0c;也提供了一些优秀的Websocket框架&#xff0c;方便开发者构…...

ExoPlayer架构详解与源码分析(7)——SampleQueue

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…...

第二证券:基本面改善预期强化 机构聚焦科技成长

沪指日前迎来“三连涨”。10月26日&#xff0c;上证指数、深证成指和创业板指全部收红&#xff0c;分别收涨0.48%、0.40%、0.65%。此前的两个交易日&#xff0c;上证指数、深证成指也均收涨&#xff0c;创业板指24日涨幅也达到了0.85%。 从近期密布发布的策略报告来看&#xf…...

大语言模型在天猫AI导购助理项目的实践!

本文主要介绍了Prompt设计、大语言模型SFT和LLM在手机天猫AI导购助理项目应用。 ChatGPT基本原理 “会说话的AI”&#xff0c;“智能体” 简单概括成以下几个步骤&#xff1a; 预处理文本&#xff1a;ChatGPT的输入文本需要进行预处理。 输入编码&#xff1a;ChatGPT将经过预…...

【STM32】GPIO控制LED(HAL库版)

STM32最新固件库v3.5/Libraries/CMSIS/CM3/DeviceSupport/ST/STM32F10x/system_stm32f10x.c 林何/STM32F103C8 - 码云 - 开源中国 (gitee.com) STM32最新固件库v3.5/Libraries/STM32F10x_StdPeriph_Driver/src/stm32f10x_gpio.c 林何/STM32F103C8 - 码云 - 开源中国 (gitee.…...

第27届亚洲国际动力传动与控制技术展览会盛大开幕,意大利国家展团闪耀回归

2023年10月24日&#xff0c;第27届亚洲国际动力传动与控制技术展览会&#xff08;PTC ASIA&#xff09;在上海新国际博览中心正式拉开帷幕。作为亚太地区动力传动行业的风向标&#xff0c;PTC ASIA致力于为来自世界各地的参展企业提供专业的采供、技术信息交互平台&#xff0c;…...

永恒之蓝漏洞 ms17_010 详解

文章目录 永恒之蓝 ms 17_0101.漏洞介绍1.1 影响版本1.2 漏洞原理 2.信息收集2.1 主机扫描2.2 端口扫描 3. 漏洞探测4. 漏洞利用5.后渗透阶段5.1创建新的管理员账户5.2开启远程桌面5.3蓝屏攻击 永恒之蓝 ms 17_010 1.漏洞介绍 永恒之蓝&#xff08;ms17-010&#xff09;爆发于…...

汽车托运全流程介绍

从来没有办理过小轿车托运的客户都很好奇究竟汽车是如何被托运的呢?整个托运的过程介绍又是怎样的呢?因为托运汽车装车时客户本人都不在场&#xff0c;看不到整个的托运过程。今天具体的捋顺下整个的操作过程。 托运汽车装车前的准备工作 1.整个车辆装载过程中需要用到2名拥有…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...