解决浏览器刷新vuex数据丢失问题

vuex的主要作用是组件之间的通信以及对数据进行中心化管理。

但是由于vuex中的数据是存在运行内存中的，所以当我们刷新页面的时候会导致store中的数据清空。

怎么解决这个问题呢？

我们可以使用传统的存储方式将store中的数据存起来，比如cookie、localstorage或者sessionstorage，这样刷新页面数据也不会丢失了。

只是为了保留浏览器刷新前的数据，所以我们选用sessionstorage，这样关闭浏览器，存储的数据就会被清空，不会产生重复数据。

具体实现思路是这样的，我们监听页面刷新事件，在刷新前将store中的数据存储到sessionstorge中。每次进入页面的时候先读取sessionstorage中的值并把它赋给store，这样就保留了刷新前的数据。

export default {name: 'App',created () {if (sessionStorage.getItem("store") ) {   //页面加载前读取sessionStorage里的状态信息this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))} window.addEventListener("beforeunload",()=>{   //在页面刷新前将vuex里的信息保存到sessionStorage里sessionStorage.setItem("store",JSON.stringify(this.$store.state))})}
}

参考链接：https://blog.csdn.net/guzhao593/article/details/81435342

转载于:https://www.cnblogs.com/xuweijin/p/10442428.html

解决浏览器刷新vuex数据丢失问题相关推荐

vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
使用localStorage解决浏览器刷新后无法再从vuex中获取数据的问题
假设有这样一个场景:用户登录后,用vuex管理用户的信息,登录成功后进入主界面,在进入主界面后刷新浏览器,此时vuex中的用户信息将无法获取到.那么应该如何解决? 办法之一是使用localStorag ...
vuex状态持久化：vuex-persistedstate解决刷新浏览器后vuex状态重置问题
一.问题和原因问题和现象:刷新浏览器后vuex状态重置原因:vuex将数据保存在cache(运行内存)中,内存中的数据是临时数据,刷新浏览器就会释放.类似于js创建一个变量,刷新浏览器变量会销毁, ...
解决页面刷新数据丢失，数据持久化问题
npm i vuex-persistedstate 数据持久化,解决vue中页面刷新,数据丢失的情况
SessionStorage 和 LocalStorage 生命周期以及浏览器刷新操作意味着什么？
SessionStorage 和 LocalStorage 的辨析 SessionStorage 和 LocalStorage 是浏览器提供的两种数据存储机制,当然这种实现是依据 HTML5 Web ...
解决:浏览器无法及时更新css样式等改动
当我们打开浏览器调试前端项目时,有时候会发现明明在本地编辑器中已经对文件进行了修改, 但是浏览器刷新页面后却没有实时更新修改过的内容,这是因为没有关闭浏览器的自动缓存功能, 若不关闭这一功能,那么当你 ...
使用php让浏览器刷新
使用php让浏览器刷新需要解决几个问题 PHP脚本执行时间限制,默认的是30m 解决办法:set_time_limit();或者修改PHP.ini 设置max_execution_time时间(不推荐 ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue解决浏览器兼容性问题
在 vue cli2 项目中使用Vuex时,ie浏览器会出现"Vuex requires a Promise polyfill in this browser"的错误提示,这是因为 ...

解决浏览器刷新vuex数据丢失问题

解决浏览器刷新vuex数据丢失问题相关推荐

最新文章

热门文章