解决vuex刷新页面就恢复初始化的方法之一

Posted 2021-01-20 dayongmengmengda

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vue实现了全局变量的共享，然而vuex也不是万能的，他在刷新页面的时候就会消失，回到初始化设置，这对于广大前端来说是一件非常头疼的事情，那么怎么解决这个问题呢？小编给出了如下的方案，贴代码：

       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))
            })
        },
在刷新页面之前，将vuex中的状态值保存到sessionstorage中，在刷新页面的时候，将vuex赋值直接读取sessionstorage中的内容，这样就将全局变量值完整的保存下来。