码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-11-16 20:57:26      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:恢复   tools   应用程序开发   保存   初始   零配置   方案   nload   pre   

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中的内容,这样就将全局变量值完整的保存下来。

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

标签:恢复   tools   应用程序开发   保存   初始   零配置   方案   nload   pre   

原文地址:https://www.cnblogs.com/dayongmengmengda/p/9971048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!