解决vue页面刷新vuex中state数据丢失的问题

【在某组件中添加如下钩子函数。比如 App.vue中】
created() {
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

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


注：
    this.$store.replaceState()  用于替换 store 的信息（状态合并）。
    Object.assign(target, ...source)  将source的值 赋给 target，若有重复的数据，则覆盖。其中...表示可以多个source。
    JSON.stringify()  用于将对象转为 JSON
    JSON.parse()   用于将 JSON 转为对象

一个暴力的解决思路，在Login.vue中 直接将上一个用户缓存的信息给删除。
此时 localStorage 没有了上个用户的信息。
【Login.vue】
created() {
    // 进入画面前，移除主页面保存的 state 信息
    localStorage.removeItem("store")
}

然后只在Main组件刷新时 使用 localStorage 记录信息。
【Main.vue】
created() {
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

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

【在某组件中添加如下钩子函数。比如 App.vue中】
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.removeItem(key)       清除一条数据
localStorage.clear()               清除全部的数据