store页面刷新数据被重置及解决方法

所谓单页应用，就是在不刷新浏览器的情况下可以在整个网页应用实时共享数据。
store是内存机制，不是缓存机制，页面刷新和关闭都会导致store初始化，store里面一般保存什么数据呢？
1、组件的初始状态；
2、后端数据的初始状态；

如果你需要存储是数据是要实时存储并且读取显示出来，那么存在本地缓存或者服务端，这样每次刷新页面都需要读取本地缓存或者服务端的API，然后保存到store，再从store去读到组件上。

解决vue刷新页面以后丢失store的数据
刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据我的需求，最合适的是sessionStorage。
beforeunload在页面刷新时触发，可以监听这个方法，让页面在刷新前存store到sessionStorage中。
当然，在页面刷新时还要读取sessionStorage中的数据到store中，读取和储存都写在app.vue中。

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

第二种方法利用localStorage

//在页面加载时读取localStorage里的状态信息
	    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
	    
	    //在页面刷新时将vuex里的信息保存到localStorage里
	    window.addEventListener("beforeunload",()=>{
	        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
	    })