消失的原因:因为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"))));
}