页面刷新后，vuex中数据丢失、初始化的解决方案 vuex-persistedstate

最新推荐文章于 2024-10-02 15:28:37 发布
最新推荐文章于 2024-10-02 15:28:37 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vuex vuex-persistedstate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AiHuanhuan110/article/details/89211062
版权
当Vue应用在页面刷新后，Vuex中的数据会丢失，导致登录状态无法保留。通过引入vuex-persistedstate插件，可以将Vuex状态存储到localStorage或cookie中，实现数据在刷新后的持久化。具体步骤包括安装插件、加载保存的状态、保存状态以及删除保存的状态，确保用户登录状态在页面刷新后依然有效。
摘要由CSDN通过智能技术生成

场景之一

应用API进行用户身份验证，将登录状态保存为Vuex状态中的布尔值。

当用户登录时，设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。
​
但是当刷新页面时，vue应用程序的状态将丢失并重置为默认值。
​
这导致的问题就是：即使用户登录了，但刷新页面时，登录状态 也会设置为false， 这样即使用户保持登录状态，也会显示登录按钮而不是注销按钮…
​
怎么做才能防止这种行为

解决方案

可以使用 vuex-persistedstate 。这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。

示例代码：

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex
最低0.47元/天 解锁文章
艾欢欢
关注
专栏目录
Vuex 页面刷新数据丢失怎么解决
youhebuke225的博客
05-26 2519
当Vuex中的数据在页面刷新后丢失时，这通常是因为Vuex的状态数据是保存在运行内存中的，页面刷新会导致Vue实例重新加载，进而Vuex中的数据被重置为初始状态。
前端登录业务中刷新页面导致VueX中存储的Token丢失问题
mwj020130的博客
06-04 3585
在实现用户登录注册的业务时，通过ajax请求将用户注册的用户名和密码发送给服务器（可以将数据放入请求头中)，服务器返回一个账号专属Token,将Token存储在总store中，然而刷新页面将导致store中的Token值丢失，变为初始值，即为空串，导致后续一系列需要用到判断Token是否存在的行为丢失。 ​ 问题原因： 表面原因是因为token没有携带给服务器，无法将携带Token的ajax请求发送，导致页面无法渲染服务器返回的数据，更深层次的原因为Vuex存储数据并非持久化的，store里的数据是保存在
解决vuex数据页面刷新后初始化操作
11-20
在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题！下面是我用过的解决方法 1、利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；下面是我在mutation中写的方法； 同步将数据的更改保存，也可以在页面调用vuex的mutation方法时同步更改；但是这种方法只能针对少量的数据需要保持不刷新，在真正的卡发中并不适用 2、利用已有的插件来进行保存新状态 一致的插件中，我目前使用的是vuex-along插件，该插件使
vuex
weixin_30500289的博客
09-17 122
一、下载vuex npm install vuex --save 在src下创建store文件夹下放store.js 在main.js引入 import Vuex from 'vuex'import store from './store/store' 二、下载vuex-persistedsate npm i -S vuex-persistedstate 在store.js...
vuex-persistedstate缓存vuex状态数据
最新发布
weixin_37841024的博客
10-02 395
在浏览器的 `localStorage` 中存储数据时，通常会受到浏览器对本地存储大小的限制。1. **数据丢失或无法保存：** 当尝试将数据存储到 `localStorage` 中时，如果超出了浏览器的存储限制，浏览器可能会拒绝保存数据，导致数据丢失。- **定期清理不必要的数据：** 定期清理过期或不再需要的数据，以确保 `localStorage` 中的数据保持在合理的大小范围内。- **限制存储大小：** 在使用 `localStorage` 存储数据时，尽量控制数据量，避免存储过大的数据。
vue单页面应用刷新网页后vuex的state数据丢失的解决方案 vuex数据状态持久化
sunrj_niu的博客
10-28 350
vue单页面应用刷新网页后vuex的state数据丢失的解决方案-------》 vuex数据状态持久化 最近只用到了vuex，vuex具体不多说，发现一个问题：刷新地址栏，vuex数据丢失 直接解决方案： 我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。 1通过 vuex-persistedstate这个插件，来实现将数据存储到本地 npm install vuex-persistedstate 之后使用这个插件在Store中 默认存储到localStorag
Vuex持久化 及 重置 Vuex-state
Jensonhui's Blog
11-21 750
Vuex 刷新数据丢失解决方案，重置 Vuex-state数据
vuex状态持久化：vuex-persistedstate解决刷新浏览器后vuex状态重置问题
一个昵称叫铃风的小前端
10-30 1375
一.问题和原因 问题和现象：刷新浏览器后vuex状态重置 原因：vuex将数据保存在cache(运行内存)中，内存中的数据是临时数据，刷新浏览器就会释放。类似于js创建一个变量，刷新浏览器变量会销毁，代码重新执行创建的是一个新的变量。 二.解决方案 解决方案就是使用前端存储，常见的是localstorage/sessionstorage，说到这里大家应该都有思路了，就是前端自己存一份，当vuex获取不到数据时尝试向localstorage/sessionstorage获取。 当然，相关的npm包有很多，大多
Vuex数据持久化存储
落下香樟树
12-24 1138
业务需求： 在基于vue开发SPA项目时，为了解决页面刷新后数据丢失的问题，我们一般都是将数据存储在localstorage或sessionstorage中；当数据需要全局处理统一管理时，我们也会借助于vue官方提供的vuex来进行数据的统一管理。vuex相比localstorage或sessionstorage来说，存储数据更安全些。与此同时，vuex也存在一些弊端，当页面刷新后，vuex中state存储的数据同时也会被更新，vuex中存储的数据不能持久化，需要监听处理来维持vuex存储的数据状态持久化。
vuex中刷新页面state数据状态的保存
aliven1的博客
04-11 2101
1.，在main.js中使用render函数渲染App.vue; 2.//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("state") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionSt...
使用vuex解决刷新页面state数据消失的问题记录
10-17
主要介绍了使用vuex解决刷新页面state数据消失的问题记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决页面刷新vuex失效（vuex-persistedstate）
weixin_42289080的博客
05-11 1165
然后正常使用vuex即可。
Vue 之 vuex 解决刷新页面 state 数据丢失的问题，使用vuex-persistedstate进行state持久化
zhuangvi的博客
02-08 2128
vuex 解决刷新页面 state 数据丢失的问题：1、使用本地存储storage；2、或者使用vuex-persistedstate进行state持久化。
vuex-persistedstate解决vuex在刷新页面之后丢失数据
pycharm_u的博客
06-20 2173
使用了vuex之后会发现，在页面刷新的时候就会将store里的数据清除，这样并不是我们想看道的。 （1）npm install vuex-persistedstate --save 安装vuex-persistedstate插件。 （2）在store.js中引入该插件 import PersistedState from 'vuex-persistedstate' （3）在store中...
刷新页面后，vuex中数据丢失，清空的解决方案vuex-persistedstate
每文的博客
06-18 1271
在nuxt中使用vuex-persistedstate（场景是登录后存储用户的信息） 1.login.vue async login(params) { try { const res = await login(Object.assign(params, this.getcodeinfo)); if (res.code == 200) { this.$message.success("登录成功！"); this.fo
使用vuex-persistedstate缓存
wyz646的博客
05-05 329
vuex不具有缓存 ，使用vuex-persistedstate插件来进行数据缓存
vuex刷新之后数据丢失，数据持久化，vuex-persistedstate
秋刀鱼笛滋味
03-27 3160
为什么刷新之后vuex的状态就没了？ 原因是刷新之后js初始化，vuex重新初始化了； 常见的解决方案有 1，mounted里面调接口重新给state赋值，太麻烦，pass 2，watch里面监听state,再赋值，也很low vuex理解不透彻的可以先看看 完美方案是利用sessionStorage/localStorage,做一个暂时的储存 store的模块化结构 主要是针对mutation...
uniApp中使用vuex-persistedstate数据持久化
2301_79413719的博客
09-18 987
uniApp中使用vuex-persistedstate数据持久化简单示例
vuex-persistedstate怎么持久化state数据
05-13
`vuex-persistedstate` 是一个 Vuex 插件，它可以将 Vuex store 中的数据持久化到本地存储中，如 localStorage 或 sessionStorage。下面是一些使用 `vuex-persistedstate` 来持久化 state 数据的示例代码： 1. 安装 `vuex-persistedstate`: ```bash npm install vuex-persistedstate ``` 2. 在 Vuex store 中引入 `vuex-persistedstate`: ```javascript import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ // ... plugins: [createPersistedState()] }); ``` 3. 在 `createPersistedState` 中传入一个配置对象，以指定要持久化的 state 属性和存储方式： ```javascript import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ state: { count: 0, user: { name: "Jack", age: 20 } }, mutations: { increment(state) { state.count++; }, setUser(state, payload) { state.user = payload; } }, plugins: [ createPersistedState({ key: "my-app", paths: ["count", "user"], storage: window.localStorage }) ] }); ``` 在上面的示例中，我们将 `count` 和 `user` 这两个 state 属性持久化到 localStorage 中，并为该存储区域指定了一个键名为 `my-app`。 现在，每次 Vuex store 的 state 发生变化时，`vuex-persistedstate` 都会将指定的 state 属性保存到本地存储中，在页面刷新后，这些数据可以被恢复到 Vuex store 中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值