Vue3 中 Pinia 持久化的全面解析和最佳实践
Vue3 中 Pinia 持久化的全面解析
一、Pinia 简介
Pinia 是 Vue 的新一代状态管理库,它提供了简洁的 API,支持 Composition API,并且拥有良好的代码拆分和热更新能力。相比于 Vuex,Pinia 的代码结构更加扁平,易于理解和维护。它主要包含以下几个核心概念:
- Stores:类似于 Vuex 中的模块,用于定义和管理应用的状态。每个 Store 都是一个独立的对象,包含状态、getters 和 actions。
- State:存储应用的数据,是 Store 的核心部分。可以通过定义响应式数据来管理应用的状态。
- Getters:类似于 Vue 的计算属性,用于对 State 进行加工和处理,提供派生状态。
- Actions:用于处理业务逻辑,可以是异步操作,例如发起网络请求等。
二、Pinia 持久化的必要性
在 Vue3 应用中,页面刷新后 Pinia 中的状态会丢失,这在某些场景下会影响用户体验。比如:
- 用户登录信息
- 用户偏好设置
- 表单编辑状态
- 多步骤操作的中间状态
三、基本实现方式
1. 手动实现
// store/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({userInfo: null,token: ''}),actions: {// 初始化时从 Storage 恢复状态initStore() {const store = sessionStorage.getItem('userStore')if (store) {this.$patch(JSON.parse(store))}},// 状态变化时保存到 StoragesaveStore() {sessionStorage.setItem('userStore', JSON.stringify(this.$state))}}
})
2. 使用插件实现
npm install pinia-plugin-persistedstate
// 或
yarn add pinia-plugin-persistedstate
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)app.use(pinia)
app.mount('#app')
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({name: '',age: 0,email: ''}),getters: {fullInfo: (state) => `${state.name} - ${state.age} - ${state.email}`},actions: {async fetchUserInfo() {// 模拟网络请求获取用户信息const response = await fetch('/api/user')const data = await response.json()this.name = data.namethis.age = data.agethis.email = data.email}},persist: true // 启用持久化,默认存储在localStorage中,键名为store的id
})
四、进阶配置
1. 选择性持久化
export const useStore = defineStore('main', {state: () => ({userInfo: null,tempData: null}),persist: {paths: ['userInfo'] // 只持久化 userInfo}
})
2. 多存储策略
persist: {strategies: [{key: 'user',storage: localStorage,paths: ['userInfo']},{key: 'temp',storage: sessionStorage,paths: ['tempData']}]
}
3. 自定义序列化
persist: {serializer: {deserialize: (value) => {try {return JSON.parse(value)} catch (err) {return {}}},serialize: JSON.stringify}
}
五、实战示例
// store/dataStorage.js
import { defineStore } from 'pinia'export const useDataStorageStore = defineStore('dataStorage', {state: () => ({operationRecord: [],currentIndex: 0,digitalManData: []}),persist: {enabled: true,strategies: [{key: 'digital-human-storage',storage: sessionStorage,paths: ['operationRecord', 'currentIndex', 'digitalManData']}]},actions: {// 清除持久化数据clearStorage() {sessionStorage.removeItem('digital-human-storage')this.$reset()},// 更新数据并同步到 StorageupdateData(data) {this.digitalManData = datathis.saveToStorage()}}
})
六、最佳实践
-
性能优化
- 只持久化必要的数据
- 避免存储大量数据
- 合理使用 localStorage 和 sessionStorage
// 好的做法
persist: {paths: ['userInfo', 'settings'], // 只持久化必要数据
}// 避免的做法
persist: {paths: ['entireState', 'hugeDataList'], // 持久化过多数据
}
-
安全性
- 敏感数据加密存储
- 及时清理过期数据
- 避免存储用户隐私信息
// 数据加密示例
persist: {serializer: {serialize: (state) => {return encrypt(JSON.stringify(state))},deserialize: (state) => {return JSON.parse(decrypt(state))}}
}
-
容错处理
- 处理序列化/反序列化异常
- 设置默认值
- 版本控制
// 完善的容错机制
persist: {beforeRestore: (context) => {// 数据恢复前的检查if (!isValidStore(context)) {return false}},afterRestore: (context) => {// 数据恢复后的处理validateAndFixData(context)}
}
-
同步机制
- 多标签页数据同步
- 状态恢复机制
- 冲突处理
// 多标签页数据同步示例
window.addEventListener('storage', (e) => {if (e.key === 'my-store') {store.$patch(JSON.parse(e.newValue))}
})
七、注意事项
- Storage 容量限制
const cleanupStorage = () => {const maxAge = 7 * 24 * 60 * 60 * 1000 // 7天const now = Date.now()Object.keys(localStorage).forEach(key => {const data = JSON.parse(localStorage.getItem(key))if (data.timestamp && (now - data.timestamp > maxAge)) {localStorage.removeItem(key)}})
}
- 数据版本管理
const store = defineStore('main', {state: () => ({version: '1.0.0',data: null}),persist: {beforeRestore: (context) => {const stored = localStorage.getItem('store-version')if (stored !== '1.0.0') {// 版本不匹配,需要迁移数据migrateData()}}}
})
- 性能影响
// 监控持久化性能:
persist: {debug: true,afterRestore: (context) => {console.time('store-restore')// 恢复操作console.timeEnd('store-restore')}
}
- 调试方法
// 开发环境下的调试工具
if (process.env.NODE_ENV === 'development') {persist: {debug: true,beforeRestore: (context) => {console.log('即将恢复的数据:', context)},afterRestore: (context) => {console.log('已恢复的数据:', context)}}
}
总结
Pinia 持久化是提升 Vue3 应用用户体验的重要手段。通过合理使用持久化机制,可以有效解决页面刷新状态丢失的问题。在实际应用中,需要根据具体场景选择合适的持久化策略,并注意性能和安全性的平衡。
相关文章:
Vue3 中 Pinia 持久化的全面解析和最佳实践
Vue3 中 Pinia 持久化的全面解析 一、Pinia 简介 Pinia 是 Vue 的新一代状态管理库,它提供了简洁的 API,支持 Composition API,并且拥有良好的代码拆分和热更新能力。相比于 Vuex,Pinia 的代码结构更加扁平,易于理…...
蓝桥杯最后一天警告!!!
1.万能头文件 #include <bits/stdc.h> 2.一道题实在一点都不会,直接碰运气骗分 #include <bits/stdc.h> using namespace std;int main() {srand(time(0));printf("%d",rand()%101);//生成一个1到10之间的随机整数,并输出print…...
el-time-picker标签的使用
需求: 实现培训日期,用户可以选择某一天的日期,这个比较简单 <el-form-item label"培训日期" prop"startTime"><el-date-picker clearablev-model"form.startTime"type"date"placeholder…...
Mysql--基础知识点--85.1--Innodb自适应哈希索引
1. 自适应哈希索引的用途 InnoDB 的自适应哈希索引(Adaptive Hash Index, AHI)是 MySQL 数据库引擎中一项智能优化查询性能的功能。其核心作用如下: 加速等值查询 哈希索引通过哈希函数将键映射到固定位置,实现 O(1) 时间复杂度的…...
Matlab 考虑电机激励力的整车垂向七自由度的被动悬架和LQR控制
1、内容简介 Matlab 200-考虑电机激励力的整车垂向七自由度的被动悬架和LQR控制 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...
统一功能处理
SpringBoot统一功能处理 本节目表 1.掌握拦截器的使用,及其原理 2.学习统一数据返回格式和统一异常处理的操作 3.了解一些Spirng的源码 文章目录 SpringBoot统一功能处理前言一、拦截器是什么?二、使用步骤1.定义拦截器2.注册配置拦截器 三,适…...
LibreOffice Writer使用01去除单词拼写判断的红色下划线
这个软件还是非常有特色的,因为大家需要office的全部功能,常常忽略了这个软件的使用体验。 csdn不是特别稳定,linux也没有什么比较好的md编辑器,所以我选择这个软件来记录我的临时博客,原因无他,它可以保存…...
JAVA基础 - 高效管理线程隔离数据结构ThreadLocalMap
欢迎光临小站:致橡树 ThreadLocalMap 是 ThreadLocal 的核心底层数据结构,负责在每个线程中存储与 ThreadLocal 实例绑定的数据。它的设计目标是高效管理线程隔离数据,同时尽量减少内存泄漏风险。以下是其核心实现细节。 数据结构与设计目标…...
每日一题(小白)暴力娱乐篇25
由题意直知,要求将给定的字符串转为符合格式的字符串。首先我们来思考一下例如02/02/02这样的数字日月肯定不用进行修改,修改后需要加上对应的年份的前两位,题目要求1960年1月1日~2059年12年12月31日,(对1960年至2059年…...
地表水-地下水耦合建模全景解析暨SWAT-MODFLOW地表与地下协同模拟及多情景专题应用
第一、模型原理与层次结构 1.1流域水循环与SWAT模型 1.2 地下水模拟与MODFLOW模型 1.3 SWAT-MODFLOW地表-地下耦合模型 1.4 QSWATMOD 插件与功能介绍 1.5 模型实现所需软件平台 第二、QGIS软件 2.1 QGIS平台 2.2 QGIS安装 2.3 QGIS界面认识 2.4 QGIS常见数据格式 2.…...
在线论坛系统
在线论坛 项目介绍项目使用技术介绍前端技术栈后端技术栈 项目运行步骤说明后端运行步骤前端运行步骤 项目使用说明用户端功能管理员端功能 部分功能说明运行截图用户端管理员端 系统源码 项目介绍 这是一个基于现代技术栈开发的在线论坛系统,提供用户交流、内容分享…...
webrtc pacer模块(一) 平滑处理的实现
Pacer起到平滑码率的作用,使发送到网络上的码率稳定。如下的这张创建Pacer的流程图,其中PacerSender就是Pacer,其中PacerSender就是Pacer。这篇文章介绍它的核心子类PacingController及Periodic模式下平滑处理的基本流程。平滑处理流程中还有…...
新能源车「大三电」与「小三电」
一、大三电系统 动力电池 作为整车的能量核心,目前主流类型包括三元锂电池(NCM/NCA)和磷酸铁锂电池(LFP),前者能量密度高,后者安全性和成本优势显著。动力电池通过模组串联形成电池包…...
xlinx GT传输器学习
xlinx有2路refclk会输入到gtbank。此2路bank输入时钟是差分输入,经过IBUFDS_GTE2源语转换为单端。如下图。 从fpga外输入高速差分时钟。 差分时钟转换为单端。 单端时钟输入到gt_common模块 下图为gt内部结构图...
C++笔记之父类引用是否可以访问到子类特有的属性?
C++笔记之父类引用是否可以访问到子类特有的属性? code review! 参考笔记 1.C++笔记之在基类和派生类之间进行类型转换的所有方法 文章目录 C++笔记之父类引用是否可以访问到子类特有的属性?1.主要原因2.示例代码3.说明4.如何访问子类特有的属性5.注意事项6.总结在 C++ 中,…...
基于SSM框架的房屋租赁小程序开发与实现
概述 一个基于SSM框架开发的微信小程序房屋租赁管理系统,该项目实现了用户管理、中介管理、房源信息管理等核心功能。 主要内容 一、管理员模块功能实现 用户管理 管理员可对通过微信小程序注册的用户信息进行修改和删除操作,确保用户数据的准…...
大模型评估论文粗读“AGIEval: A Human-Centric Benchmark for Evaluating Foundation Models“
Zhong W, Cui R, Guo Y, et al. Agieval: A human-centric benchmark for evaluating foundation models[J]. arXiv preprint arXiv:2304.06364, 2023. 摘要翻译 评估大模型在处理人类层级的任务时的通用能力,是AGI发展和应用中至关重要的一环。传统的衡量标准通常依…...
程序化广告行业(76/89):行业融资全景剖析与代码应用拓展
程序化广告行业(76/89):行业融资全景剖析与代码应用拓展 大家好!在之前的文章里,咱们一起了解了程序化广告行业的发展趋势以及PC端和移动端投放的差异。今天,咱们接着深入学习,这次聚焦在程序化…...
网工基础 | 常见英文术语注解
原创:厦门微思网络 以下是一些网工专业常见的英文术语注解: IP Address(Internet Protocol Address) 互联网协议地址,是分配给连接到互联网的设备的唯一标识符,用于在网络中定位和通信。例如,“…...
【FPGA开发技巧】Modelsim仿真中,显示状态机的名称,而非编码数字
示例 被仿真的文件名为:cmd_handle.v,其中有r_st_current和r_st_next两个状态机变量。 该模块在tb文件中,被例化的名称为cmd_handle_u0 按照如下格式写:cmd_handle_u0.r_st_current 示例tb文件: timescale 1ns / 1…...
二分答案----
二分答案 - 题目详情 - HydroOJ 问题描述 给定一个由n个数构成的序列a,你可以进行k次操作,每次操作可以选择一个数字,将其1,问k次操作以后,希望序列里面的最小值最大。问这个值是多少。 输入格式 第一行输入两个正…...
Nginx 命令大全:Linux 与 Windows 系统的全面解析
Nginx 是一个高性能的 HTTP 和反向代理服务器,广泛应用于 Web 服务、负载均衡和反向代理等场景。本文将从 Linux 和 Windows 系统的角度出发,详细解析 Nginx 的常用命令,并区分两种系统之间的差异,帮助你高效地管理和维护 Nginx 服…...
我的计算机网络(总览篇)
总览--网络协议的角度 在一个庞大的网络中,该从哪里去了解呢?我先细细的讲一下我们访问一个网站的全部流程,当我们的电脑连上网络的时候,就会启动DHCP协议,来进行IP地址,MAC地址,DNS地址的分配…...
开源CMS的模块化设计和API接口如何具体影响其扩展性?
优秀的CMS系统都有自己主打的特点,开源CMS凭借其灵活性和低成本优势占据了市场主流地位,而模块化设计与API接口正是其扩展性的两大基石。本文将深入探讨这两大技术特性是如何影响cms的扩展性的。 一、模块化设计:功能解耦与生态繁荣的引擎 …...
【网络原理】网络通信基础
目录 一. 网络发展史 (1)局域网 (2)广域网 二. 网络基础知识 (1)IP地址 (2)端口号 (3)协议 (4)五元组 一. 网络发展史 网络的发…...
Win11系统 VMware虚拟机 安装教程
Win11系统 VMware虚拟机 安装教程 一、介绍 Windows 11是由微软公司(Microsoft)开发的操作系统,应用于计算机和平板电脑等设备 。于2021年6月24日发布 ,2021年10月5日发行 。 Windows 11提供了许多创新功能,增加了新…...
新手宝塔部署thinkphp一步到位
目录 一、下载对应配置 二、加载数据库 三、添加FTP 四、上传项目到宝塔 五、添加站点 六、配置伪静态 七、其他配置 开启监控 八、常见错误 一、打开宝塔页面,下载对应配置。 二、加载数据库 从本地导入数据库文件 三、添加FTP 四、上传项目到宝塔…...
MCU如何查看系统有没有卡死
前言:在我们调试单片机的时候,经常会遇到系统非预期运行的状况。造成系统卡死的原因有很多,主要有:野指针,数组越界,死锁,还有一些while写入的一些逻辑错误。本文就如何排查这些问题,…...
有哪些反爬机制可能会影响Python爬取视频?如何应对这些机制?
文章目录 前言常见反爬机制及影响1. IP 封禁2. 验证码3. 请求头验证4. 动态加载5. 加密与混淆6. 行为分析 应对方法1. 应对 IP 封禁2. 应对验证码3. 应对请求头验证4. 应对动态加载5. 应对加密与混淆6. 应对行为分析 前言 在使用 Python 爬取视频时,会遇到多种反爬…...
【辰辉创聚生物】提供上万种单抗/多抗及其偶联物
辰辉创聚生物致力于提供高质量的一抗(Primary Antibodies)、二抗(Secondary Antibodies)和对照抗体(Control Antibodies),支持分子生物学、免疫学及生物医学科学领域的前沿研究。我们拥有超过40…...
Google Chrome Canary版官方下载及安装教程【适用于开发者与进阶用户】
谷歌浏览器(Google Chrome)以其高性能、强扩展性和良好的用户体验深受全球用户喜爱。在其多个版本中,Chrome Canary因具备最前沿的功能测试环境,成为开发者和技术探索者的首选。如果你希望第一时间体验Google Chrome最新功能&…...
BERT - BERT 模型综述
1. BERT的两个任务 (1)Pre-Training 预训练 Masked LM (MLM) - 让模型预测被隐藏(Mask)掉的token。 例如:输入“我喜欢吃[MASK]”,Label是“我喜欢吃苹果”, 模型需要预测出“苹果”。这种…...
Vue 大文件分片上传组件实现解析
Vue 大文件分片上传组件实现解析 一、功能概述 1.1本组件基于 Vue Element UI 实现,主要功能特点: 大文件分片上传:支持 2MB 分片切割上传实时进度显示:可视化展示每个文件上传进度智能格式校验:支持文件类型、大小…...
Matlab 电机激励模型和仿真
1、内容简介 Matlab 191-电机激励模型和仿真 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 clc close all clear Tn 165;%电机转矩 R 0.05;%定子半径 n0 1800;% 电机转速 i 2;%额定电流 Lmin 4.95;%最小电感 k 82.5; Nr 6;%转子级数 T 60/Nr/n0;%周期 b 0…...
GPU算力优化
GPU(图形处理单元)算力优化是提升计算性能的重要任务,在深度学习、科学计算等领域有重要意义。下面从硬件层面、软件层面和算法层面为你介绍一些优化方法: 硬件层面 选择合适的 GPU:不同的 GPU 在算力、显存、功耗等…...
微服务拆分的原则、时机、方法以及常见问题
前言# 在平常情况下,技术架构会随着业务规模大小、团队人数多少、技术债积累速度等动态变化。当然,引起架构变化最主要的因素还是业务发展速度。 在以前的单体架构到微服务架构演进历程 文章2 等文章中,有一张架构演进的图,如下…...
第十八天 - ELK日志体系集成 - 自定义Logstash插件 - 练习:分布式日志分析平台
前言 在分布式系统和微服务架构中,日志管理是监控系统健康、排查故障的核心环节。ELK(Elasticsearch、Logstash、Kibana)作为业界领先的日志分析解决方案,能够实现日志采集、处理、存储与可视化的全链路管理。本文将手把手带你掌…...
HBuilderX中uni-app打包Android(apk)全流程超详细打包
一、Android生成打包证书 1、Android平台签名证书(.keystore)生成指南_android 签名生成-CSDN博客(如果不上架应用商店可以跳过,可以使用云端证书) 二、打开manifest.json配置基础设置 三、配置安卓应用图标 四、配置安卓启动页图片 五、…...
CTF web入门之命令执行
web29 文件名过滤 由于flag被过滤,需要进行文件名绕过,有以下几种方法: 1.通配符绕过 fla?.* 2.反斜杠绕过 fl\ag.php 3.双引号绕过 fl’‘ag’.php 还有特殊变量$1、内联执行等 此外 读取文件利用cat函数,输出利用system、passthru 、echo echo `nl flag.php`; ec…...
安宝特案例 | 某户外机房制造企业应用AR+作业流,规范制造过程,记录施工节点,保障交付质量
行业特点:产品客制化、依赖人工,工程量大、细节多,验收困难 户外通讯机房无疑是现代工业社会的“信息心脏”,承载着信息交换、传输与处理的重任。建设一座质量过关的户外通讯机房是保障通信稳定运行的基石。 通常建设一个户外通信…...
学习MySQL的第八天
海到无边天作岸 山登绝顶我为峰 一、数据库的创建、修改与删除 1.1 引言 在经过前面七天对于MySQL基本知识的学习之后,现在我们从基本的语句命令开始进入综合性的语句的编写来实现特定的需求,从这里开始需要我们有一个宏观的思想&…...
ESP8266 采集 DHT11 和 DS18B20 温湿度数据 MQTT 上传至 Home Assistant
ESP8266 采集 DHT11 和 DS18B20 温湿度数据 MQTT 上传至 Home Assistant DHT11 采集 DHT11 温湿度数据并通过 MQTT 联网上传至 Home Assistant 智能家居平台; Arduino 代码 #include <ESP8266WiFi.h> #include <PubSubClient.h> #include <Ardui…...
三、TorchRec中的Optimizer
TorchRec中的Optimizer 文章目录 TorchRec中的Optimizer前言一、嵌入后向传递与稀疏优化器融合如下图所示:二、上述图片的关键步骤讲解:三、优势四、与传统优化器对比总结 前言 TorchRec 模块提供了一个无缝 API,用于在训练中融合后向传递和…...
操作系统 4.1-I/O与显示器
外设工作起来 操作系统让外设工作的基本原理和过程,具体来说,它概括了以下几个关键步骤: 发出指令:操作系统通过向控制器中的寄存器发送指令来启动外设的工作。这些指令通常是通过I/O指令(如out指令)来实现…...
Qt 5.14.2 入门(三)基本知识理解
目录 一、新建项目后生成的三个文件的作用和内容1、.h文件:头文件(如mainwindow.h)2、.cpp文件:源文件(如mainwindow.cpp)3、main.cpp:主程序 二、信号和槽机制1、信号(Signal)2、槽(Slot)3、连…...
Java中常见的设计模式
Java中常见的设计模式 Java 中有 23 种经典设计模式,通常被分为三大类:创建型、结构型和行为型。每个设计模式都解决了不同类型的设计问题。以下是几种常见设计模式的总结,并附带了实际应用场景、示例代码和详细的注释说明。 一、创建型设计…...
nltk 是怎么和 Transformers(比如 BERT 模型)联动来处理文本的
🧠 一句话解释nltk: nltk 是一个用于自然语言处理(NLP)的 Python 库,功能包括分词、词性标注、命名实体识别、文本分类等。 全称是:Natural Language Toolkit(自然语言工具包) &…...
项目日志配置模板示例
1.新增application.properties配置 logging.configclasspath:logback-spring.xml spring.profiles.activedev 将项目部署到服务器时需要将dev修改为test后再进行打包部署 2.新增logback-spring.xml <?xml version"1.0" encoding"UTF-8"?> <…...
sql server统计小时数据中每日最大风速及风速对应的风向
客户提出一个需求,有历年逐小时的风速、风向资料,想获取历年最大的风速及风速对应的风向值,通过sql 怎么实现,这个统计,我认为主要考虑一个问题,就是数据重复性,所以我采用以下方法实现…...
【SQL】MySql常见的性能优化方式
MySQL性能优化的常用方式及对比说明 一、引言二、MySQL性能优化的常用方式及对比说明1. 索引优化1.1 合理创建索引1.2 覆盖索引1.3 索引下推 2. SQL语法优化2.1 避免低效操作2.2 分页优化2.3 JOIN优化 3. 配置与架构优化3.1 参数调优3.2 读写分离与分库…...