Pinia 数据持久化储存(pinia-plugin-persistedstate)

news2025/2/23 12:12:18

pinia需要使用pinia-plugin-persistedstate插件来进行数据的存储

插件官网地址:
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html

1、安装

这里对插件的安装就不多赘述了,放两张官网的截图

使用命令:npm i pinia-plugin-persistedstate

在这里插入图片描述

2、使用

在这里插入图片描述

3、关于全部缓存及部分缓存的说明

(1)将store的state中的全部数据进行缓存,直接在state同级下面添加persist对象
在这里插入图片描述

此时,默认将数据存放在浏览器的SessionStorage中,key为store的名称,value为该store中所有的数据。
在这里插入图片描述
(2)将store的state中的数据进行部分缓存
此时需要在persist中添加strategies数组,
在这里插入图片描述

每个元素的key是想要储存的数据变量名(在state中定义的),storage可以写sessionStorage或者localStorage,此时,sessionStorage中的key就是变量名,value就是该变量的值

在这里插入图片描述

文章到这里就结束啦,希望能够帮助到大家!

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

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

相关文章

Vue--》计算属性与监视(侦听)属性的使用

目录 计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项 深度监视 计算属性(computed) 计算属性指的是通过一系列运算之后&#xff0c;最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用&#xff0c;案例如下&#xff1a; <…

前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React框架React框架React框架&#x1f525…

vite搭建vue2项目

问题提出 最近在做一个练习的小项目&#xff0c;由于要配合组成员的其它成员来搭建项目&#xff0c;大多掌握的技术栈都在vue2&#xff0c;用惯了vite来搭建&#xff08;vite真香~&#xff09;,就想着来搭建一个vue2的项目。原本以为查下百度很快可以搭好&#xff0c;没想到折…

【小程序从0到1】WXSS模版语法汇总

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

微前端vue项目实战 -- 乾坤qiankun框架 (一)

背景&#xff1a; 公司研发的项目主要是 GIS地图为基础的管理系统&#xff0c;由主体项目&#xff08;管理业务模块&#xff09; GIS地图应用&#xff0c;由于 GIS地图应用模块 会在多个地方使用&#xff0c;所以单独构建一个项目&#xff0c;分别在不同的业务场景中引用、交互…

JavaScript鼠标移动事件及案例

一、鼠标点击事件 1.onclick单击事件 鼠标单击时事件处理函数 <input type"button" id"bt" value"点击"> <script> //找到按钮并设置点击事件 document.getElementById("bt").onclick function (){ //被点击…

kkFileView部署及使用

Windows:kkFileView部署及使用前言部署Web引用普通webVue &#xff1a;需要引入base64.js前言 kkFileView支持主流文档的在线预览服务。官网地址 部署 kkFileView不需要集成&#xff0c;只需要部署到服务器即可。 从 Gitee 上下载最新的压缩包&#xff0c;或者从代码仓库中下…

【Vue+element-ui搭建前端页面】适用于初学者学习

作者有话说&#xff1a; 学习编程我们必不可少的就是做项目&#xff0c;在学习后端的同时&#xff0c;前端知识也是要学习滴&#xff0c;这篇文章将展示如何利用Vue和element-ui搭建前端界面。话不多说&#xff0c;进入主题&#xff01;&#xff01;&#xff01; 目录 首先是…

网页报错“Form elements must have labels”的处理

网页报错“Form elements must have labels”的处理 先给出错误现象源码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width&quo…

uniapp中单选按钮的实现

标签说明&#xff1a; radio-group&#xff1a;单项选择器&#xff0c;内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下&#xff0c;实现这些radio的单选。 radio&#xff1a;单选项目 属性说明&#xff1a; change&#xff1a;<radio-group>…

Vue中使用element-ui 给按钮绑定一个单击事件,实现点击按钮就弹出一个dialog对话框

1.需求描述 想要实现点击一个按钮就弹出一个对话框&#xff0c;在对话框中可输入数据进行提交&#xff0c;在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row><el-button type"primary" plain>新增</el…

Java支付宝沙箱环境支付,SDK接口远程调试【内网穿透】

文章目录1.测试环境2.本地配置3. 内网穿透3.1 下载安装cpolar内网穿透3.2 创建隧道4. 测试公网访问5. 配置固定二级子域名5.1 保留一个二级子域名5.2 配置二级子域名6. 使用固定二级子域名进行访问1.测试环境 MavenSpring bootJdk 1.8 2.本地配置 获取支付宝支付Java SDK,ma…

Vue--》过滤器介绍及其使用方法

目录 过滤器 过滤器的兼容性 私有过滤器和全局过滤器 过滤器的连续调用 过滤器进行传参 过滤器 过滤器的兼容性 注意&#xff1a;Vue3中明确取消了过滤器这个功能&#xff0c;如果想使用只能在Vue2中进行&#xff0c;如果所做的项目是Vue2的话&#xff0c;可以了解一下这…

uni-app开发微信小程序,H5 关于压缩上传图片的问题

文章目录 前言 一、为什么要压缩图片 二、图片压缩方式 1. 微信小程序​​​​​​​ 2. H5 总结 前言 关于微信小程序、H5兼容性问题&#xff0c;今天就压缩以及上传图片做一个可实现方法的简要阐述。 一、为什么要压缩图片​​​​​​​ 在使用uni-app开发小程序及H…

深入了解-微信开发者工具

主要介绍微信开发者工具如何编译小程序代码&#xff0c;如何实现小程序模拟器以及如何调试小程序。 1 简介 虽然在开发语言层面小程序与传统的网页差别不大&#xff1a;是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来…

B/S架构

目录 一、什么是B/S架构 二、三层架构 三、Active技术 四、网络节点 五、分布式网络计算 六、JavaScript 一、什么是B/S架构 1.B/S架构是软件系统体系结构&#xff0c;是指浏览器-Web服务器(Broswer-Server)&#xff0c;采用三层架构&#xff0c;即表现层、业务逻辑层、数据访问…

十分钟带你入门Chrome插件开发

一、简述 我们所说的chrome插件一般都是指chrome扩展程序&#xff08;Chrome Extension&#xff09;。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件&#xff0c;它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器…

【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》 内容简介&#xff1a; 《Flask Web全栈开发…

flex布局 多种方法让两个盒子分布在左右两边

方法一&#xff1a; 一个父盒子里面包含了两个子盒子的&#xff0c;可以用justify-content:space-between属性 <div classparent> <div class"left"></div> <div class"right"></div> </div> .parent { disp…

FreeRTOS(教程非常详细)

概述&#xff1a; 之前写了关于FreeRTOS的部分内容&#xff0c;为了方便阅读&#xff0c;现在给汇总到一起了。全部学习完后&#xff0c;恭喜你对FreeRTOS有了更深的认知。 第一章 FreeRTOS移植到STM32 第二章 FreeRTOS创建任务 第三章 FreeRTOS任务管理 第四章 FreeRTOS消…