Vuex持久化插件

已于 2022-10-23 11:15:27 修改
阅读量517 收藏
点赞数 1
文章标签： javascript 前端 java
于 2022-10-23 10:29:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50485758/article/details/127471584
版权

      自己写localStorage.setItem等 需要一个个写, 很麻烦

      这里介绍一个vuex的插件包叫做vuex-persistedstate@3.2.1版本(配合vue2使用, 默认最新版是配合vue3使用)

1.下载此包工具

yarn add vuex-persistedstate@3.2.1

2.在src/store/index.js 中，导入配置

3.这次再来重新登录, 查看浏览器调试工具vuex和浏览器本地存储位置, 是否自动同步进入

4.刷新网页看调试工具里vuex的默认值确实从本地取出了默认值, 保证了vuex的持久化

只会c+v的小码农
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vuex持久化插件解决浏览器刷新数据消失问题
10-17
为了解决这个问题，我们可以使用Vuex 持久化插件，如 `vuex-solidification` 插件。 `vuex-solidification` 插件的工作原理是通过监听 Vuex 的 `store.subscribe` 钩子，每当 mutation 执行完毕并更新 state 后，它...
cacheState：自用的vuex持久化插件
02-10
vuex持久化的插件，自用，不能保证线上质量 为开发环境调试时，避免刷新后vuex数据清空，方便开发的插件 文件说明 src cacheState：核心逻辑 installCacheState：vue局部注入api文件 例 使用案例（vue-cli4.x初始...
vuex全局状态管理工具（适用vue2）
2301_76357103的博客
06-14 685
组件间通信有许多方法，可参考《Vue组件间传值》，但是当组件越来越多，组件相关性不大时，通信就比较复杂而且乱。vuex就是组件间的通信共享仓库。Vuex 是 vue 项目中实现大范围数据共享的技术方案。简单理解：把需要多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，共享这个对象中的所有变量属性，并且是响应式的。在说集中式管理模式之前，我们可以先来想想常见的处理方式是怎样的，即每个组件维护自身的数据和状态，自给自足，分而治之；
vuex利用第三方包实现数据持久化
web00_11的博客
09-11 699
Vuex–持久化 目的： 让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。 在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。 如果有别的模块也需要持久化，也存储在本地 1）首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。 npm i vuex-persistedstate 2）然后：在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 c.
vuex持久化存储插件vuex-persistedstate
weixin_51382988的博客
01-06 2919
在vue项目中我们经常使用vuex作为全局状态管理工具，但是在项目中会出现当我们刷新页面的时候，存储在vuex的state中的数据会重置为初始值，有时候这是我们所不期待的。在项目中我们可以借助vuex-persistedstate来做数据的持久化。
Vuex持久化插件(vuex-persistedstate)
路虽远，行则必至！
05-16 1660
利用vuex-persistedstate，解决刷新数据消失的问题。对于Vue中不同组件间的数据通讯，可以使用Vuex做数据存储，让各组件共享状态。Vuex优势：相比sessionStorage存储数据更安全，sessionStorage可以在控制台被看到。Vuex劣势：在F5强制刷新页面后，Vuex会重新更新state，所以，存储的数据会丢失。Vuex作为全局的状态管理，但页面刷新后数据会丢失，显然这样很不好。为了解决这一问题，我们可以结合本地存储或者使用插件。
vuex的持久化插件
weixin_70348294的博客
09-14 142
【代码】vuex的持久化插件。
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
12-08
页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和...怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。 1.手动利用HTML5的本地存储 方法
【vue】vuex持久化插件vuex-persistedstate：
SunPeng的博客
09-05 1889
【vue】vuex持久化插件vuex-persistedstate：
vuex 数据持久化插件
L3340606861的博客
04-10 126
刷新页面，vuex里面数据丢失、清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化。
利用vuex-persistedstate将vuex本地存储
Dax1_的博客
01-17 1730
使用场景 最近在做Vue项目中的登录模块，登陆成功后获取到token，将token存储在vuex中，然而我发现切换路由后vuex中的数据都恢复默认了，原来页面刷新之后vuex的数据都会恢复默认。而后面进行鉴权处理需要token，于是我们要将vuex中的数据进行本地存储。 这里就用到了vuex持久化插件vuex-persistedstate Vuex-persistedstate 这个插件的原理结合了存储方式，只是统一配置后就不需要手动写存储方法了 使用方法： 安装 npm install vuex-pe
Vuex的插件vuex-persistedstate数据持久化存储
05-04 5417
Vuex的插件vuex-persistedstate数据持久化存储
vue和vuex版本对应问题
weixin_48271592的博客
05-13 8210
项目场景： 使用vuex实现全局数据管理 问题描述 vuex项目中store挂载失败 报错截图： 原因分析： 下载安装包下载了最新版本（vuex4版本）。 最新版本： npm# npm install vuex@next --save Yarn# yarn add vuex@next --save 错误版本截图： 版本要求: 在vue2中，要用vuex的3版本 npm# npm install vuex@3 --save Yarn# yarn add vuex@3 --save 在vue3中，要用v
Vuex状态、数据持久化（vue2、vue3状态数据持久化）
最新发布
weixin_65793170的博客
03-22 2272
Vuex状态、数据持久化的几种实现方案
Vuex持久化存储插件
qq_48666244的博客
09-06 331
【代码】Vuex持久化存储插件。
Vuex持久化 插件 vuex-persistedstate
H_carrot的博客
11-22 629
手动实现： 1、调用接口获取token 2、一式两份 vuex + localStorage 3、vuex初始化的时候 优先从本地取 取不到才初始化为空 ( state:{ token:getToken() || ' ' }) 为什么采取这个方案？ vuex ：基于内存的方案 存取速度特别快 基于vuex模式使用方便，缺点：刷新丢失 ls: 基于磁盘的方案 存取速度慢 没有vuex方便， 优势：刷新不丢失 场景：token 想要vuex存取速度快和vue配合灵活 还想要刷新不丢失 +ls .
uniapp vuex 持久化插件
05-25
如果您想要在 Uni-app 中使用 Vuex 持久化插件，可以使用 vuex-persistedstate 插件来实现。 vuex-persistedstate 是一个简单的 Vuex 插件，它可以将 Vuex 状态持久化到本地存储中，以便在刷新页面或重新加载应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值