vuex刷新页面state数据丢失解决方法

消失的原因：因为store的数据是保存在运行内存中，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值

解决办法：存储到localStorage/sessionStorage

通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息

localStorage 是永久存储在本地，除非你主动去删除;

sessionStorage 是存储到当前页面关闭为止

vuex冷门实例方法–replaceState

replaceState 是覆盖 state ，合并的工作要使用 Object.assign() ，当然了，大部分时候并不需要合并，因为 sessionStorage 里的就是最新的 state ，直接覆盖就行了

保存到sessionStorage里

下面是将vuex里的信息，刷新前保存到sessionStorage里，页面加载完成后取出用replaceState方法覆盖当前的store

 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))
        })
    },

保存到localStorage里

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

    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") &&this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
}