VueX浏览器刷新如何保存数据

VueX浏览器刷新如何保存数据

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

原因：
因为当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化
·
·
·

方法一：

在 App.vue 的 created 钩子函数里写下了如下代码;

//在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })

·
·
·

方法二：

router/router.js 下

setItem()

刷新getItem()