vuex持久化存储工具persistedstate踩坑1

最新推荐文章于 2024-03-22 09:00:29 发布
最新推荐文章于 2024-03-22 09:00:29 发布
阅读量343 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51002293/article/details/128309445
版权

目的：在store根模块引入了子模块 并且实现本地存储化

结果使用了reducer存储部分子模块数据 浏览器的localStorage一直没有存储的数据

根模块如下：

18447c708ef5462eb033cd93e31d5f16.png

子模块如下：

c332d714b8dc4cc5bc8d36a4b33a15d1.png 

折腾一晚上 也没存进来

406a3b19cf0f474f87eb78dd714b243d.png 

最后在子模块新增了一个修改state中属性的方法

b988d0dfa369477387085964fcf4bd46.png 

然后用$store.commit()触发了这个方法 

再打开浏览器就存储成功了

51bb034adb3d4e709096a3616d0c231e.png

 结论：本地存储化工具只有在修改了要存储的数据时 才会触发第一次存储

codecodegirl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用vuex-persistedstate插件时,遇到的问题
m0_59006402的博客
07-17 2898
这是一个做持久化的插件:vuex-persistedstate 我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了 这行代码是写在vuex里面的,就是说,我直接从本地去拿数据 list: JSON.parse(window.localStorage.getItem('abc')).category.list || [] 直接看下代码: 我一开始是这样想...
vue3中使用vuex踩坑指南（从入门到使用完成）
qq_41200621的博客
11-20 239
踩坑1，使用vuex-persistedstate包进行持久化操作，跑通项目单纯使用vuex中的值，不调用user中的mutations中的方法不会把数据持久化到本地浏览器中。踩坑2，项目使用了router在router目录中的文件和.vue文件获取值方式不一样，要通过引入@/store才能获取值。踩坑3，项目中vue3与vue2的获取值的方式不一样，这个需自行研究，我的项目是采用vue3的。在src目录下的store目录下新建modules文件夹，再在文件夹下新增user.js文件。
利用vuex-persistedstate将vuex本地存储
Dax1_的博客
01-17 1754
使用场景 最近在做Vue项目中的登录模块，登陆成功后获取到token，将token存储在vuex中，然而我发现切换路由后vuex中的数据都恢复默认了，原来页面刷新之后vuex的数据都会恢复默认。而后面进行鉴权处理需要token，于是我们要将vuex中的数据进行本地存储。 这里就用到了vuex持久化插件vuex-persistedstate Vuex-persistedstate 这个插件的原理结合了存储方式，只是统一配置后就不需要手动写存储方法了 使用方法： 安装 npm install vuex-pe
vue前端缓存持久化过程中遇到的问题
qq_41557284的博客
09-30 413
vuex
【vue】Vuex 入门教程：状态管理和持久化解决方案
freeGameBox的博客
06-02 423
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以让我们在组件之间共享数据，实现组件之间的数据持久化。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态时，如果 store 中的状态发生变化，那么相应的组件也会得到高效更新。你不能直接修改 store 中的状态，唯一的途径就是显式地提交 mutation，这样可以方便地跟踪每个状态的变化，也可以实现一些调试工具来帮助我们更好地理解我们的应用。
vue项目踩坑之旅：vuex持久化
yayay1010的博客
07-30 433
在做项目总，页面跳转传参有两种方法，query，params，其中query会在路径显示内容，params刷新会消失 在本次项目中，我最终选择了使用vuex来统一管理需要传递的参数 问题是： vuex刷新，数据也会丢失 于是用到了，vuex状态持久化插件vuex-persistedstate 以下为用法 https://www.jianshu.com/p/e88ab068820b ...
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
10-17
主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex的使用及持久化state的方式详解
08-28
vuex-persistedstate 是一个插件，可以帮助我们将 Vuex 的 State 持久化到 localStorage 中。我们可以使用它来保存我们的应用程序的状态，从而实现持久化的效果。 9. 结论 Vuex 是一个强大的状态管理模式，可以...
vuex实现数据状态持久化
10-16
本文将详细介绍如何使用 `vuex-persistedstate` 这个插件来实现Vuex状态的持久化。 首先，我们需要安装 `vuex-persistedstate` 插件。在项目目录下，打开终端并运行以下命令： ```bash npm install vuex-...
vue3如何使用vuex以及如何持久化存储
qq_45083002的博客
06-08 1412
vuex在vue3中具体的使用方法以及如何持久化存储
vuex-persistedstate数据同步存储到本地的插件
qq_58061710的博客
06-06 243
将vuex中管理的状态数据同时自动存储在本地的插件， vuex-persistedstate的配置与使用
Vuex状态、数据持久化（vue2、vue3状态数据持久化）
最新发布
weixin_65793170的博客
03-22 3181
Vuex状态、数据持久化的几种实现方案
Vuex/Pinia实现数据持久化存储另一种解决方案：vuex页面刷新数据丢失问题
dsyuan001的博客
11-08 646
vuex/pinia实现数据持久存储的另一种解决方案，使用浏览器beforeunload事件，在浏览器刷新或关闭时将数据存储在本地。
Vue3进行持久化存储（vuex-persistedstate）安装失败
weixin_44746279的博客
12-02 821
这里，发现报错信息里面说明修复依赖冲突，此命令带有--force或--legacy peer deps。在进行安装的时候，加上--legacy peer deps就没有问题了。
探索vue2框架的世界：vuex持久化，存储的数据刷新页面后导致数据丢失？
Code_King006的博客
04-07 1896
vuex中存储的数据，刷新页面后导致数据丢失的处理方式。
vue3 使用vuex以及数据持久化
YWW_ABC的博客
03-17 2805
【代码】vue3 使用vuex以及数据持久化。
在vuex中使用了vuex-persistedstate持久化插件 为什么页面刷新 非标准属性丢失
越是安静内敛的人，越容易生不惊人死不休
05-09 176
但是，该插件只能保存原始类型（Primitive）和普通对象（Plain object），而不能直接保存非标准属性。属性都是直接添加到该对象上的非标准属性。为了解决这个问题，你可以创建一个新的纯对象，将。数组作为该对象的一个属性进行保存，并将。属性作为该对象的标准属性进行保存。
vuex数据持久化插件
White_021的博客
06-20 80
刷新页面，vuex里面数据丢失、清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化。
vuex-persistedstate
热门推荐
weixin_44705688的博客
08-30 1万+
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题 这篇文章主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题 页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。 vuex优势：相比sessionStorage，...
vuex持久化 vuex-persistedstate 用axios的json保存数据
07-23
你可以使用vuex-persistedstate插件来实现vuex的持久化。这个插件可以将vuex的状态保存到本地存储中，确保页面刷新后状态不会丢失。 首先，你需要安装vuex-persistedstate插件： ```bash npm install vuex-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值