在Vue项目中使用pinia-plugin-persistedstate插件

最新推荐文章于 2024-09-10 15:32:00 发布
最新推荐文章于 2024-09-10 15:32:00 发布
阅读量294 收藏 3
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/139460491
版权

https://prazdevs.github.io/pinia-plugin-persistedstate/

pinia-plugin-persistedstate 是一个可配置的持久化插件，跟Pinia配合使用，因为单纯的Pinia没有持久化的功能。

用npm安装插件

执行命令npm i pinia-plugin-persistedstate进行安装：
在这里插入图片描述

安装完成后，看项目根目录下面的package.json文件：
在这里插入图片描述

将插件添加到pinia实例上

在这里插入图片描述

在pinia store声明中添加persist: true配置项

在声明pinia store时，添加persist: true配置项：
在这里插入图片描述

在开发者工具-》存储-》本地存储 中可以看到持久化的信息：
在这里插入图片描述

听海边涛声
关注
Vue3 - Pinia 状态管理的数据持久化，pinia-plugin-persistedstate 插件（安装配置）
王佳斌
11-30 3732
所谓数据持久化简单说，就是将数据存到缓存中，这样刷新页面也不会丢失状态管理的数据。Pinia 已经为我们提供了数据持久化的插件，把这玩意引入到项目中，简单的配置下就能实现了，非常的简单。
vue3+vite+pinia+pinia-plugin-persistedstate持久化存储！！！pinia-plugin-persist 插件（持久化报错无效！！！感）
最新发布
jieweiwujie的博客
09-26 220
上面这一句defineStore报错重载有问题；因此使用2 可能和vue版本用关系吧。
【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
02-08 1803
为什么需要持久化？ 刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。 在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。 要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、lo...
Pinia持久化插件：pinia-plugin-persistedstate
everfoot的博客
09-01 3834
pinia-plugin-persistedstate是一个 Pinia 插件，用于持久化 Pinia store 的状态到本地存储
vue3 引入 pinia-plugin-persistedstate详细配置
weixin_44073164的博客
05-08 970
paths: ['user',], //指定 state 中哪些数据需要被持久化。import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件。pinia.use(piniaPluginPersistedstate) //将插件添加到 pinia 实例上。const pinia = createPinia() //创建pinia实例。2.store文件夹新建user.ts。key: 'user', //存储名称。
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
热门推荐
H524268015wsw的博客
11-23 3万+
1、在stores文件夹下创建一个store ，名为user.js ，命名是尽量是见名知意的。2、定义user.jsStore 是使用定义的，并且它需要一个唯一名称，作为第一个参数传递这个name，也称为id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为use...是跨可组合项的约定// defineStore('userInfo',{}) userInfo就是这个仓库的名称nameusername: '赫赫',age: 30,hobby: [
pinia数据持久化插件pinia-plugin-persistedstate的基础使用+vue3组合式，有手就会系列。
weixin_50975849的博客
01-19 1983
💕🔮 本文由 【第四人称Alice】 原创，首发于 CSDN ✨✨✨🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭，有疑惑的宝子可以去看官网哦~说明一下，博主使用的是v3.2.0版本，技术栈为vue3+ts，看了很多博主的持久化用法都不是自己想要的，最后自己扒官网写了最新的用法，废话不多说，马上开始。
vue3数据持久化方案：pinia-plugin-persistedstate源码浅析
Jinuss的博客
09-10 1536
vue3数据持久化方案原理剖析，pinia的标配
pinia数据持久化（pinia-plugin-persistedstate)插件使用
small_sapling的博客
01-04 994
pinia数据持久化（pinia-plugin-persistedstate）插件使用
vue状态管理 pinia pinia-plugin-persist安装使用
m0_67402013的博客
06-18 2109
任意vue项目，我以uniapp为例 官方地址 ：pinia github 2安装pinia及持久化工具pinia-plugin-persist 使用 1项目根目录下创建文件夹pinia-store pinia-store文件夹名字可以任意起文件名字可以任意起 index.js login.js...
【vue3-pinpa】vite pinia-plugin-persistedstate安装使用 vue状态管理工具pinpa，pinia持久化如何使用，如何配置pinia,vue3刷新数据不丢失
m0_60531448的博客
06-10 7172
【vue3-pinpa】vite pinia-plugin-persistedstate安装使用 vue状态管理工具pinpa，pinia持久化如何使用，如何配置pinia,vue3刷新数据不丢失
适用于Pinia的持久化储存插件 pinia-plugin-persistedstate
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
04-26 788
将插件添加到pinia实例上。
（pinia-plugin-persistedstate）pinia 持久化存储
大雾起了清晨
05-28 3362
我们使用pinia的时候，会遇到页面刷新的时候数据丢失，所以我们可以来直接帮我们完成这个操作。学习pinia资料。
nuxt3 pinia pinia-plugin-persistedstate
02-09 1253
nuxt3 pinia 持久化存储
pinia 持久化插件pinia-plugin-persistedstate 安装、使用(图文详解)
xuelang532777032的博客
06-08 1万+
5、压缩localStorage 要存的数据，我记得每个浏览器对localStorage 的存储是有限制大小的有的1M 有的6M。序那边博主开头说了，每个浏览器对localStorage 是有限制大小的，你不压缩，有时候你触发了某个bug，你都不知道怎么回事，来，跟着博主操作。3、其实就是省略掉localStorage 这一步，会自己写的小伙伴自己写个也是蛮快的。1、博主vue3、ts 5.x、pinia 2.1.3版本，2、配置stores/index.ts​​​​​​​。1、这个是两个变量（
Pinia 状态持久化插件——pinia-plugin-persistedstate
weixin_42289080的博客
10-12 2331
vue3+pinia项目中，实现pinia的状态持久化，保证页面刷新 store 中的数据不丢失
pinia-plugin-persistedstate适用于 Pinia 的持久化存储插件
欢迎大家一起攻克bug
06-24 782
配合pinia 插件存、取、删本地数据（localStorage等）
pinia持久化存储（pinia-plugin-persistedstate）
HWL5679的博客
07-29 400
pinia-plugin-persistedstate 旨在通过一致的 API 为每个人和每个项目中的 Pinia Store 提供持久化存储。
vue3下载pinia-plugin-persistedstate
08-12
4. 安装完成后，你可以在你的 Vue 3 项目中使用 `pinia-plugin-persistedstate` 插件了。 请注意，安装 `pinia-plugin-persistedstate` 插件之前，你需要确保已经在你的项目中安装了 `pinia` 库。你可以使用类似的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值