Vue.js-解决vuex中的数据刷新丢失的问题

我们在使用vue开发项目时，通常会使用到其专门的状态管理工具——vuex。但是vuex中的store中的数据有一个特性，就是在页面刷新的时候，会重新加载vue实例，store里面的数据就会被重新赋值，这样就会导致数据丢失的问题。

为此我们可以通过js存储技术解决，这里使用sessionStorage较为合适。为什么sessionStorage合适，是因为sessionStroage的存在时间时当前页面打开的时候，页面一旦关闭，立即失效。下次打开页面再进来时，仍是新数据，不是上次存储的数据了。

在我们的APP.vue中添加如下代码，就可以实现对应的功能：

    //在页面加载时读取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))
    })