vuex持久化失败

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

目标: 使用vuex-persistedstate做持久化无效果

分支名: rabbit-vue3 (提交记录: 6d30207)

推荐时长: 10分钟

问题说明

安装vuex-persistedstate插件并配置在store实例中, 在存入到vuex数据时, 发现刷新数据还是丢失并且localStorage里无存入效果

问题截图

分析解决

  1. 仔细查看官方文档(百度到的博客不一定百分百是对的)
    1. 官方文档:
  2. 核对后发现自己的plugins单词错误了, 位置也不对, 位置应该和其他vuex选项并列关系
  3. 成功效果如下

 

这样再刷新的时候, 插件会默认从本地取值给到vuex的属性作为初始值在项目中使用 

总结

当遇到不报错的代码时, 应该多思考代码从哪里开始去实现目标效果, 那里就是源头, 从源头查看, 多去看官方文档和使用的版本要对应

 

菠萝湃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
解决刷新vuex数据消失的问题-- Vuex持久化插件 （vuex-persistedstate）
m0_45382009的博客
02-28 925
vuex可以进行全觉得状态管理，但是刷新后数据会消失。 1.安装 npm install vuex-persistedstate --save 2.配置 // store/index.js import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ //.... plugins:[createPersistedState()] }) 此插件的原理：利用本地存储 默认存入l
Vuex 无法持久化存储---借助本地存储完成用户登录
Allurewuhui的博客
03-05 680
场景：用户登录需要携带 token 向服务端获取数据，但是如果将 token 存储在Vuex当中，刷新页面时 token 将被清空，导致服务器无法根据 token 返回对应的用户数据 原因：Vuex是无法持久化存储的 解决方法：借助 localStorage 存储 token 实现持久化存储 // 在Vuex文件中 // action内容： // 登录业务 async userLogin({ commit }, data) { let res = await reqLog
关于vuex状态持久化的问题解决方案
shi860715的博客
06-11 526
关于vuex状态持久化的问题解决方案 在我们vue项目中，经常会用到关于vuex的状态管理。可是我们在刷新页面的时候，悲剧的发现我们之前保存的状态都没有了。 那们我们怎么样来实现状态的管理呢？怎么持久化呢？ 在查找很多资料后，大多数的帖子都是写的是使用注册事件的方式，来解决，比如： 原理如下：、 1、app.vue中注册监听页面刷新事件 2、在页面刷新之前要将state 对象进行转json字符串处理。 3、当页面刷新后，在将sessionStore中的state对象进行转对象处理，将state对象与sess
vuex持久化问题？
最新发布
Robber的博客
01-04 363
vuex持久化问题
解决页面刷新vuex失效（vuex-persistedstate）
weixin_42289080的博客
05-11 1030
然后正常使用vuex即可。
vuex模块化，vuex数据持久化的问题
qq_45668489的博客
06-23 276
想要实现vuex 模块化，直接在index.js 这样改，就可以动态导入写在camera,user文件里面的子模块 index.js 文件 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" //插件数据持久化 Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersist.
如何解决vuex里面的数据持久化问题
zhuyuan123456的博客
04-12 105
下载一个第三方的包
如何实现一个简易版的vuex持久化工具
10-16
主要介绍了实现一个简易版的vuex持久化工具，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vuex实现数据状态持久化
10-16
今天小编就为大家分享一篇vuex实现数据状态持久化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vuex持久化插件解决浏览器刷新数据消失问题
10-17
为了解决这个问题，我们可以使用Vuex 持久化插件，如 `vuex-solidification` 插件。 `vuex-solidification` 插件的工作原理是通过监听 Vuex 的 `store.subscribe` 钩子，每当 mutation 执行完毕并更新 state 后，它...
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
10-17
主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex的使用及持久化state的方式详解
08-28
Vuex 使用及持久化 State 的方式详解 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 1. Vuex 的特点 ...
Vuex实现数据持久化，数据刷新消失解决方案
qq_40924034的博客
12-30 594
在开发中，有一些全局数据，比如用户数据，系统数据等。这些数据很多组件中都会使用，我们当然可以每次使用的时候都去请求，但是出于程序员的“洁癖”、“抠”等等优点，还是希望一次请求，到处使用。 这时候很自然的想到存储在 localStorage 中，但是有个问题是，这些数据可能会变，如果没能及时同步的话，就会用到不正确的数据，即使做了数据同步，但是 localStorage 中的数据不是响应式的，不能自...
uni-app中vuex配置出现的问题
tutoujiehegaosou的博客
04-14 503
vuex出现TypeError: Cannot read property 'state' of undefined等问题
vuex持久化插件（vuex-persistedstate）
weixin_46475440的博客
05-06 3170
一、使用插件解决vuex数据刷新丢失 使用vuex的插件 在使用vuex-persistedstate 插件 这个插件其实也是使用本地缓存来储存store中的属性 安装vuex-persistedstate插件 npm install vuex-persistedstate --save 在store中的index.js中引入 import persistedState from 'vuex-persistedstate' let create_persistedstate = persisted
Vuex状态持久化
weixin_45610518的博客
11-24 1019
theme: qklhk-chocolate highlight: atelier-cave-light 描述 Vuex用于处理组件之间通信以及状态管理的问题; Vuex本质上就是一个保存在内存中的对象，存在的问题就是当页面刷新后该对象就会被重新初始化; 之前存的数据就拿不到了，于是在使用这些数据的地方就可能发生报错; 解决的方法就是把state中的数据做一个持久化存储或者说备份; 一般就存在localStorage、sessionStorage或者cookies中; 这里以localStorage为例.
vue使用vuex-persistedstate插件时,遇到的问题
m0_59006402的博客
07-17 2869
这是一个做持久化的插件:vuex-persistedstate 我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了 这行代码是写在vuex里面的,就是说,我直接从本地去拿数据 list: JSON.parse(window.localStorage.getItem('abc')).category.list || [] 直接看下代码: 我一开始是这样想...
vuex-persistedstate安装之后报错
09-13 741
当控制台出现以下错误的情况，说明安装插件的方式不对 Can't resolve 'ansi-html-community' Cannot find module 'is-docker 不要使用npm安装
vue2数据持续化存储插件使用详细过程
m0_73321385的博客
07-25 486
需要注意的是，`vuex-persistedstate`和`vue-ls`都可以实现数据持续化存储，但它们的使用方式和配置略有不同。你可以根据自己的需求选择适合你的插件。要在Vue 2中实现数据持续化存储，可以使用插件如`vuex-persistedstate`或`vue-ls`。3. 现在，当你的Vue应用程序中的状态发生变化时，`vuex-persistedstate`插件将自动将状态存储到本地存储中。3. 在你的Vue组件中，你可以通过`this.$ls`访问本地存储。
uniapp vuex 持久化
07-20
在 UniApp 中，你可以使用 `vuex-persistedstate` 库来实现 Vuex 的持久化。`vuex-persistedstate` 是一个用于在 Vuex 中持久化状态的插件，它可以将 Vuex 状态保存到本地存储中，以确保在刷新页面或重新打开应用时能够保留状态。 以下是在 UniApp 中使用 `vuex-persistedstate` 实现 Vuex 持久化的步骤： 1. 安装 `vuex-persistedstate` 库： ``` npm install vuex-persistedstate ``` 2. 在 Vuex 的 store 文件中引入 `vuex-persistedstate`： ```javascript import createPersistedState from 'vuex-persistedstate'; ``` 3. 在创建 Vuex 的 store 实例时，将 `createPersistedState` 作为插件添加到选项中： ```javascript const store = new Vuex.Store({ // ...其他配置 plugins: [createPersistedState()] }); ``` 4. 配置需要持久化的模块： ```javascript const store = new Vuex.Store({ // ...其他配置 plugins: [createPersistedState({ key: 'yourKey', // 可选，用于自定义存储的键名，默认为 'vuex' paths: ['yourModule'], // 可选，指定需要持久化的模块，默认为全部模块 storage: uni.getStorageSync // 可选，自定义存储引擎，默认使用本地缓存 uni.getStorageSync })], modules: { yourModule: { // your module configuration } } }); ``` 在上述示例中，你可以通过 `key` 选项来自定义存储的键名，通过 `paths` 选项来指定需要进行持久化的模块，通过 `storage` 选项来指定自定义的存储引擎。 这样，当你使用 Vuex 存储状态时，`vuex-persistedstate` 会将状态自动保存到本地存储中，并在应用重新加载时还原状态。 请注意，在小程序中使用本地缓存进行持久化时，需要使用 `uni.getStorageSync` 作为存储引擎。如果需要在其他平台或环境中实现持久化，可以根据不同的需求选择适当的存储引擎。 希望这可以帮助到你实现 UniApp 中的 Vuex 持久化！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菠萝湃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值