Vuex解决刷新清除的办法

最近用vue做了个音乐播放的网站，用到了vuex，最开始实现二点挺好的，后来发现只有刷新页面全局数据就清除恢复默认了，先想到的是用session存，但是这样就没有必要用vuex了,最后解决办法来了

不需要使用插件（vuex-persistedstate）之类的直接使用sessionStorage将数据vuex数据保存到sessionStorage中

具体思路：
在加载事件进行判断你的sessionStorage.x有没有值，如果有值，就将session数据存入到$store.state中，如果没有就创建一个空的sessionStorage.x

具体步骤：
1.在mounted或者created钩子函数里面进行if判断
2.如果存在则将session的数据保存到$store.state中这里用到了$store的replacestate方法，这个方法主要是替换 store 的根状态，仅用状态合并或时光旅行调试，简单来说就是覆盖store数据，另外还有一个Object.assign()方法，这个方法就是合并，将源对象的所有可枚举属性复制到目标对象这是为了将session的数据保存到一个大的集合中，方便传给到$store.state中

if(sessionStorage.getItem('store')){			this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('store'))))
			}

3.如果说if判断sessionStorage.x不存在,那么则创建一个sessonStorage.x并将$store.state的数据存入到session中，注意如果session存放对象等数据时需要使用JSON.stringify()进行序列化

window.addEventListener('beforeunload',()=>{				sessionStorage.setItem("store",JSON.stringify(this.$store.state))
			})

给大家说明一下addEventListener()方法
这是一个事件监听方法，第一个参数是click或者“mousedown”
第二个参数是事件触发后调用的函数
第三个参数是可选的，是个bool值，用于描述事件是冒泡还是捕获

上面我的方法是在beforeunload时创建

以上代码就实现了$store.state数据消失时将数据存入到session，在加载完成时再把session数据存入到$store.state，保证了$store.state的数据