Vue3 刷新后,pinia存储的数据丢失怎么解决

这个问题有两种解决办法:

  • 一是使用pinia的持久化存储
  • 一是使用vue的依赖注入

刷新后,通过pinia存储的vue store数据丢失,实际上是因为Vue原组件卸载、新组件重新挂载导致的,vue store是挂载在组件上的,当刷新导致组件卸载,那么原有的数据也就会同时丢失。

1.pinia持久化存储

持久化存储,实际上是pinia在组件卸载时,写入Localstorage。Vue项目中使用持久化存储的过程为:

  • 安装并在sotre处注入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()
store.use(piniaPluginPersist) // 使用插件export default store

在配置上述代码前,首先需要执行npm install pinia-plugin-persist --save,安装插件。

  • 在需要持久化的store中添加persist
import { defineStore } from 'pinia'export const useMyStore = defineStore({id: 'myStore',state: () => ({data: null}),persist: true, // 添加 persist 属性

这样,在页面刷新后,myStore的值就不会消失。

2.依赖注入

第二种方法是以来注入,它通过在顶层框架中注入一个需要在全局使用的变量,这样,在所有顶层组件的子孙组件中都可以通过依赖注入使用该变量。使用方法为:

  • 变量提供组件
// 1. 引入symbol类型的key
import { userInfoSymbolKey } from '../utils/keys'// 2. 获取store中存储的变量 
const userInfo = computed(() => useClientidStore().loginUserInfo)// 3. 在挂载生命周期中,调用获取用户信息的方法
onMounted(() => {useStore().setUserState() 
})// 4. 提供数据
provide(userInfoSymbolKey, { userInfo })
  • 变量注入组件
import { userInfoSymbolKey } from '../../utils/keys' // 引入key
const { userInfo } = inject(userInfoSymbolKey) as any // 注入变量

这样,就可以在组件中使用userInfo变量了。

在这里插入图片描述

依赖注入其实是通过顶层组件的每次加载都会向其内部注入相应的值来实现的。因为,不论底层组件如何刷新、卸载、挂载,对于顶层组件而言,都会随着底层组件每个动作的执行进行一遍卸载和挂载的过程。所以,这种方法实质是在每次组件更新时都重新请求数据或向组件中塞入新变量来达到变量看起来保持没消失的效果,实际上,每次刷新原来的变量都发生了变化,我们刷新后使用的,是顶层组件重新获取并向下传递的新数据而已。所以,对于这种方式,有两种场景非常适用:

  • 需要重新判断权限。如修改用户权限后,刷新后用户权限发生变化,需要在多个子组件中使用该权限变量时,依赖注入就只需要调用一次接口就行,可供后面的所有子组件使用。
  • 可能没有数据改变,但必须给多个下级组件使用时。

但是,使用该方法时需要注意:

  • 如果是通过调用接口获取数据,那么,在根组件挂载生命周期中需要调用该方法,保证每一次的组件重新挂载都能够获取到最新的数据

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

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

相关文章

C++调用python: VS2017 + Anaconda + pypi第三方库

步骤一:在Anaconda中创建虚拟环境 这一点对大家来说应该很简单,简单介绍一下,不做过多解释。值得注意的是,要用conda命令创建环境,用pip install配置环境。 conda create -n c_python_env python3.9 # 用conda创建pyt…

PyQt6 QToolButton工具按钮控件

​锋哥原创的PyQt6视频教程: 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计32条视频,包括:2024版 PyQt6 Python桌面开发 视频教程(无废话…

服务器数据恢复—EMC存储raid5故障导致上层应用崩溃的数据恢复案例

服务器存储数据恢复环境: EMC某型号存储,8块组建一组raid5磁盘阵列。上层操作系统采用zfs文件系统。 服务器存储故障&分析: raid5阵列中有2块硬盘未知原因离线,raid5阵列崩溃,上层应用无法正常使用。 服务器数据恢…

Python实验项目8 :科学计算与可视化

1:创建 numpy 数组。 要求: (1)使用 array()函数、empty()函数、zeros()函数、linspace()函数等创建 numpy 数组。 (2)使用 numpy 数组的索引和切片方法访问数组元素。 # 要求: # &#xff0…

深度学习(三):pytorch搭建卷积神经网络

1.常用函数介绍 0 设备准备 device torch.device("cuda:0" if torch.cuda.is_available() else "cpu")这行代码是用来选择设备的,根据是否有可用的 CUDA 设备来选择使用 GPU 还是 CPU 进行计算。 更详细的解释如下: torch.cuda.…

socket.io介绍

1. 使用的技术 Socket.IO 是一个封装了 Websocket、基于 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node。其屏蔽了所有底层细节,让顶层调用非常简单。 另外,Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket…

Spring三级缓存处理循环依赖的过程

Spring三级缓存 Spring三级缓存是什么? 一级缓存:单例池。存放的是完整的Bean对象。经过完整的生命周期。二级缓存:存放需要提前暴露的Bean对象。也就不完整的Bean对象。需要提前暴露就是指,可能会被循环依赖。(这里可能需要用代…

jupyter notebook 添加环境与删除环境

添加环境 一、查看conda现有的环境 打开 Anaconda Powershell Prompt 输入以下代码,查看全部环境:conda env list 可以看到如下已经配置的环境变量: 二、激活现有环境 在 Anaconda Powershell Prompt 继续输入,激活环境&#…

Python之Appium 2自动化测试(Android篇)

一、环境搭建及准备工作 1、Appium 2 环境搭建 请参考另一篇文章: Windows系统搭建Appium 2 和 Appium Inspector 环境 2、安装 Appium-Python-Client,版本要求3.0及以上 pip install Appium-Python-ClientVersion: 3.1.03、手机连接电脑,并在dos窗口…

13-Vue基础之自定义指令与插槽的使用

个人名片: 😊作者简介:一名大二在校生 🤡 个人主页:坠入暮云间x 🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。 🎅**学习目标: 坚持每一次的学习打卡 文章…

[c++]——string类____详细初步了解string类的运用

在成为大人的路上喘口气. 目录 🎓标准库类型string 🎓定义和初始化string对象 💻string类对象的常见构造 💻string类对象的不常见构造 💻读写string对象 🎓 string类对象的修改操作 &#x1f4…

openGauss学习笔记-135 openGauss 数据库运维-例行维护-检查openGauss健康状态

文章目录 openGauss学习笔记-135 openGauss 数据库运维-例行维护-检查openGauss健康状态135.1 检查办法135.2 操作步骤135.3 异常处理 openGauss学习笔记-135 openGauss 数据库运维-例行维护-检查openGauss健康状态 135.1 检查办法 通过openGauss提供的gs_check工具可以开展o…

List系列集合

List系列集合特点:有序,可重复,有索引 ArrayList:有序,可重复,有索引 LinkedList:有序,可重复,有索引 (底层实现不同!适合的场景不同!…

java实战(四):编写学生信息管理系统页面·

1.要求 编写程序 实现表格的输入和编辑功能。界面如下: 1、用户按插入键后,把学号、姓名和成绩插入到最后一行,序号显示当前的行号。 2、当用户选中表格的某一行时,按删除按钮,则这一行从表格中删除 3、编辑功能&am…

OpenCV中八种不同的目标追踪算法

引言 目标跟踪作为机器学习的一个重要分支,加之其在日常生活、军事行动中的广泛应用,受到极大的关注。在AI潮流中,大家对于深度学习,目标跟踪肯定都会有过接触了解:在GPU上通过大量的数据集训练出自己想使用的垂直场景…

sqli-labs(9)

45. 不会显示报错信息通过or 1验证 在密码处输入)or(1 登录成功 )union select 1,2,3 # )union select 1,database(),3 # )union select 1,(select group_concat(table_name) from information_schema.tables where table_schemasecurity),3 # )union select 1,(select gro…

学习记录PCL-1 通过哈希表进行三维点云的虚拟格网划分

直接对整个场景的点云进行特征提取,效果很差,因此通过划分区域格网进行划分。格网划分有很多种方式,在这里尝试使用哈希表进行格网链接,后续通过在每个格网内基于点云特征进行提取。 参考博客: 点云侠的PCL 点云分块_p…

ESP32-Web-Server编程- 通过文本框向 Web 提交数据

ESP32-Web-Server编程- 通过文本框向 Web 提交数据 概述 前述章节我们通过简单 HTML、AJAX、Websocket、SSE 在网页上显示数据,通过网页上的按钮控制 ESP32 的行为。从本节开始,我们将进一步了解通过网页与 ESP32 进行交互的方法。 实现更复杂的交互功…

【OJ比赛日历】快周末了,不来一场比赛吗? #12.02-12.08 #15场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…)比赛。本账号会推送最新的比赛消息,欢迎关注! 以下信息仅供参考,以比赛官网为准 目录 2023-12-02(周六) #4场比赛2023-12-03…

nginx部署多个vue或react项目

下载nginx(tar.gz) nginx: download(官方地址) 部署nginx # 进入nginx压缩包所在目录 cd /usr/nginx# 解压 tar -zxvf nginx-1.25.3.tar.gz# 安装nginx的相关依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel# 生成Makefile可编译文件 cd /usr/ng…