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

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

原文地址：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本地存储的容量有限，而且这个方法对于数据很大的话有点不太好。