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

在vue项目中用vuex来作全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

缘由：

由于store里的数据是保存在运行内存中的,当页面刷新时，页面会从新加载vue实例，store里面的数据就会被从新赋值初始化

解决思路：

将state的数据保存在localstorage、sessionstorage或cookie中（三者的区别），这样便可保证页面刷新数据不丢失且易于读取。

1. localStorage: localStorage的生命周期是永久的，关闭页面或浏览器以后localStorage中的数据也不会消失。localStorage除非主动删除数据，不然数据永远不会消失。
2. sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即便刷新页面或者进入同源另外一个页面，数据依然存在。可是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不同的。
3. cookie:cookie生命期为只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不一样），通常不能超过20个。缺点是不能储存大数据且不易读取。

因为vue是单页面应用，操做都是在一个页面跳转路由，所以sessionStorage较为合适,缘由以下：

1. sessionStorage能够保证打开页面时sessionStorage的数据为空；
2. 每次打开页面localStorage存储着上一次打开页面的数据，所以须要清空以前的数据。

vuex中state数据的修改必须经过mutation方法进行修改，所以mutation修改state的同时须要修改sessionstorage,问题却是能够解决可是感受很麻烦，state中有不少数据，不少mutation修改state就要不少次sessionstorage进行修改，既然如此直接用sessionstorage解决不就好了，为什么还要用vuex画蛇添足呢？
vuex的数据在每次页面刷新时丢失，是否能够在页面刷新前再将数据存储到sessionstorage中呢，是能够的，beforeunload事件能够在页面刷新前触发，可是在每一个页面中监听beforeunload事件感受也不太合适，那么最好的监听该事件的地方就在app.vue中。

1. 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
2. 在beforeunload方法中将store.state存储到sessionstorage中。

代码以下：

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}