vuex刷新页面导致数据丢失的解决方案

蔚落 2023-06-08 15:00 48阅读 0赞

这是转载大佬的方案，决定非常使实用

原文地址：[https://blog.csdn.net/guzhao593/article/details/81435342][https_blog.csdn.net_guzhao593_article_details_81435342]

关于vuex刷新为什么会数据丢失的原因就不多说了，有用过vuex的应该都会了解，下面是解决方案

### 思路： ###

*  在刷新前把state的数据(通过localStorage或者sessionStorage)本地存储起来
 *  刷新之后再再把存储起来的state放回store.state

思路很清晰吧，下面进行实现方案

我们在App.vue入口去实现这个方案，这样就不需要在每个页面都写一遍

`beforeunload`事件在页面刷新时先触发的，所以下面看代码

created() {
      //在页面加载时读取localStorage里的状态信息
      if (localStorage.getItem('store')) {
    	this.$store.replaceState(
    	  Object.assign({}, 
    		this.$store.state, 
    		JSON.parse(localStorage.getItem('store'))
    		)
    	  );
    	  localStorage.removeItem('store');
    	}
        
        //在ios中，beforeunload被弃用改只用pagehide
    	//在页面刷新时将vuex里的信息保存到localStorage里
    	window.addEventListener('pagehide', () => {
    	  localStorage.setItem('store', JSON.stringify(this.$store.state));
      });
    }

代码copy老大的，这里我多加了localStorage.removeItem('store')，因为localStoreage本地存储的容量有限，而且这个方法对于数据很大的话有点不太好。

[https_blog.csdn.net_guzhao593_article_details_81435342]: https://blog.csdn.net/guzhao593/article/details/81435342

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex页面刷新数据丢失的解决办法

[vuex页面刷新数据丢失的解决办法][vuex] 在vue项目中用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失

缺乏、安全感/ 2023年06月25日 02:26/ 0 赞/ 40 阅读

相关 vuex刷新页面导致数据丢失的解决方案

这是转载大佬的方案，决定非常使实用原文地址：[https://blog.csdn.net/guzhao593/article/details/81435342][https

蔚落/ 2023年06月08日 15:00/ 0 赞/ 49 阅读

相关解决-刷新页面Vuex数据丢失

vue将数据存入vuex里面，在进行页面刷新的时候，数据丢失，这里有两个解决办法应对不同场景：第一种假如你的路由跳了3层以上，而且这几个页面都要用同一个数据`roo

╰半夏微凉°/ 2023年02月22日 08:06/ 0 赞/ 47 阅读

相关 vuex-persistedstate解决vuex在刷新页面之后丢失数据

使用了vuex之后会发现，在页面刷新的时候就会将store里的数据清除，这样并不是我们想看道的。（1）npm install vuex-persistedstate --s

我不是女神ヾ/ 2022年01月11日 10:17/ 0 赞/ 525 阅读

相关解决redux/Vuex刷新页面数据丢失问题

前言先简单描述一下需求： A页面和B页面都需要通过同一个接口获取的数据来展示页面； B是A的子页面，从A页面可以跳转到B页面；思考从减少页面的

小咪咪/ 2021年09月30日 08:10/ 0 赞/ 1979 阅读

相关 vuex刷新之后数据丢失，各种解决方案,vuex-persistedstate

为什么刷新之后vuex的状态就没了？原因是刷新之后js初始化，vuex重新初始化了；常见的解决方案有 1，mounted里面调接口重新给state赋值，太麻烦，

女爷i/ 2021年09月18日 15:08/ 0 赞/ 829 阅读

相关如何解决vuex页面刷新数据丢失问题？

作者：kim 来自：kimshareclub微信公众号 1、问题描述：一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的

浅浅的花香味﹌/ 2021年09月16日 23:34/ 0 赞/ 540 阅读

相关解决vuex页面刷新数据丢失问题（简单有效）

1.问题描述一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex

左手的ㄟ右手/ 2021年09月01日 05:08/ 0 赞/ 773 阅读

相关解决vuex页面刷新数据丢失问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

缺乏、安全感/ 2021年08月30日 20:40/ 0 赞/ 590 阅读

相关 vuex刷新页面数据不丢失

需求 `点击左侧菜单，右侧就显示相应的内容，这个是通过路由来实现的` `但是点击右测内容，展示左侧不同的标题，这个该怎么搞？` 大致思路 `1 将当前选中的数

爱被打了一巴掌/ 2021年08月30日 12:26/ 0 赞/ 512 阅读