VUE-VUEX-刷新页面后数据丢失

最新推荐文章于 2022-11-26 09:26:10 发布
最新推荐文章于 2022-11-26 09:26:10 发布
阅读量130 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/xiaohuihui96/blog/2120631
版权

问题描述

vuex在f5刷新页面后状态数据会丢失

猜想

可能状态的存储是以全局静态变量的形式存储，存储于内存中，所以在刷新页面后会被清理掉。

解决思路

将需要持久化的数据，在保存的时候进行持久化，在统一获取的方法上进行非空判断，如果空则将持久化的数据去出重新赋值.

缓存可以考虑使用 SessionStorage 和 LocalStorage

解决方案:

1 在mutations提交方法里面进行缓存

21a7b9b9a63a3dea5a5e03eb6e758a814f5.jpg

2 在getter上进行判断

3ae28461047e758bbddb98972e7028ca856.jpg


转载于:https://my.oschina.net/xiaohuihui96/blog/2120631

chruo60440
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vuex持久化插件-在F5刷新页面后数据不见的问题
weixin_30471561的博客
12-24 96
https://www.cnblogs.com/lemoncool/p/9645587.html 转载于:https://www.cnblogs.com/cs122/p/10169969.html
解决vue F5刷新数据丢失
weixin_38673922的博客
05-29 1248
原因： 系统登录成功之后，将信息保存在了vuex中的store中，当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，触发created中方法条件未能满足，因此数据就丢失了 解决方法： 登录成功后，信息存到vuex中的同时将数据用sessionStorage存储到本地，刷新页面之后将存储在本地的值重新赋值给vuex中 //将key存放入vuex _this.$store.state.key = _this.ruleF
Vuex 白话教程第二讲：Vuex 旗下的 State 和 Getter
fengzhen8023
01-27 445
转载出处：简书作者 大宏说 作者链接：大宏说 先说两句 上一讲 「Vuex 到底是个什么鬼」，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？ 同样，我们已经知道了...
keep-alive结合vuex实现特定页面的前进刷新，后退不刷新
weixin_34347651的博客
04-02 157
  类似需求：做到前进刷新数据,后退不刷新数据呢?  有需求在微信h5页面中，底部有四个tab首页、视频、订单列表、我的，实现进入这三个页面二级页面（即产品详情、视频详情、订单详情）后，后退是缓存的组件，不需要再请求数据，但tab间的切换是需要重新请求的。  网上实现类似需求：  https://blog.csdn.net/leileib...
解决Vuex刷新页面数据丢失的问题
热门推荐
qq_51441159的博客
11-26 1万+
vuex持久化或者页面刷新数据丢失
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
12-08
vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。 1.手动利用HTML5的本地存储 方法
vuex页面刷新后数据丢失的方法
12-11
（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 2. HTML5提供的2种客户端存储数据...
vuex刷新后数据丢失的解决方法
01-18
我们在写vue项目的时候，经常要用到vuex作为内存来储存，但是我们存放在vuex中的数据（用户数据，当前页面的数据等等）在刷新后就会丢失，那么如何解决呢？超级简单。 1，安装vuex-persistedstate npm install --...
关于页面刷新vuex数据消失问题解决方案
08-30
本篇文章主要介绍了关于页面刷新vuex数据消失问题解决方案 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex管理状态 刷新页面保持不被清空的解决方案
12-13
//保证刷新页面数据不消失* function storeLocalStore (state) { window.localStorage.setItem("publicTit",JSON.stringify(state)); } export default { [RECEIVE_PUBLICHTIT] (state,{title}){ state.publicTit...
浅谈 HTML5 的 DOM Storage 机制 (转)
weixin_33922670的博客
06-24 369
在开发 Web 应用时，开发者有时需要在本地存储数据。当前浏览器支持 cookie 存储，但其大小有 4KB 的限制。这对于一些 Ajax 应用来说是不够的。更多的存储空间需要浏览器本身或是插件的支持，如 Google Gears 和 Flash。不过开发人员需要通过检测当前浏览器所支持的插件类型来使用对应的接口。 HTML5 中新引入了 DOM Storage 机制，通过使用键值对在客户端保存数...
vuex按F5刷新手数据丢失，无法保存问题最简单解决方案（亲测有效）
happy81997的博客
04-07 971
vuex按F5刷新手数据丢失，无法保存问题最简单解决方案…… 原因： 页面F5刷新后，vuex会重新更新state，所以存储的数据会丢失 解决办法： 将vue相对state存在localStorage或sessionStorage或cookie中一份，刷新页面的时候，vuex数据消失了，vuex再从sessionStorage中拿回数据，变相的实现了数据刷新不丢失。 具体解决过程： 以vuex中的userdistCode变量为例。 一、vuex中mutations给需要记忆数据的变量...
解决Vuex在F5刷新页面后数据不见的问题
qq_42353989的博客
07-22 842
Vuex持久化插件 cnpm install vuex-persistedstate --save .引入及配置 1. 在store下的index.js中 2. import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [cre...
解决vue单页面应用刷新网页后state数据丢失问题
Alice
06-03 941
vue单页面F5刷新，state数据丢失问题iview实现单页面的数据管理解决方法 iview实现单页面的数据管理 很多数据管理，各种借口调用，F5刷新后全变成空白表格 解决方法 在主页面加载时去读取sessionStorage，页面重载时存储整个store到sessionStorage，可以实现数据本地化存储，解决刷新丢失数据的问题 <div id="app"> <router-view/> </div> </template> <s
解决vuex页面刷新数据丢失问题
wsdshdhdhd的博客
08-28 3743
一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行。办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据。...
vuex页面刷新数据丢失问题的四种解决方式
频繁记录
08-24 5657
vuex页面刷新数据丢失问题的四种解决方式
Vue 页面刷新，状态数据丢失问题
sinat_36539161的博客
11-07 9247
在开发过程中发现，Vuex 状态值存在页面刷新，数据丢失情况。 具体：在登陆页成功登陆，将用户信息保存到 Vuex，跳转至首页，首页显示用户信息，再刷新首页，vuex中保存的数据会丢失！   原因：store里的数据是保存在运行内存中的，当刷新页面，以前的内存被释放，重新加载脚本，store里面的数据就会被重新赋值。 解决方法：将state里的数据保存一份到本地存储。 在登陆页面传数据 ...
vue2中vuex数据修改后刷新页面
最新发布
07-13
在 Vue 2 中，如果你在 Vuex 中修改了数据并希望刷新页面，可以使用 `window.location.reload()` 方法来实现页面的刷新。但是需要注意的是，页面的刷新会导致所有的状态丢失，并重新加载整个页面。 下面是一个示例： 在你的组件中，使用 Vuex 的 `commit` 方法来修改数据，并在修改数据后调用 `window.location.reload()` 方法来刷新页面。 ```javascript export default { methods: { incrementCount() { this.$store.commit('increment') window.location.reload() }, decrementCount() { this.$store.commit('decrement') window.location.reload() } } } ``` 在上述示例中，`incrementCount` 和 `decrementCount` 方法分别使用 `commit` 方法来调用 Vuex 中的 `increment` 和 `decrement` mutation。在每个方法中，修改数据后立即调用 `window.location.reload()` 方法来刷新页面。 需要注意的是，刷新页面会导致所有的状态丢失，并重新加载整个页面。因此，在使用 `window.location.reload()` 方法前，请确保你已经保存了任何需要保留的状态或数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值