vuex页面刷新 数据消失
作者:互联网
js代码是运行在内存中的 代码中运行时所有的变量 函数也都是保存在内存中的
刷新页面 以前申请的内存被释放 重新加载脚本代码 变量重新复制 所以这些数据想要存储就必须存储外部,
例如:LocalStorage、Session Storage、Index DB等。这些方法都可以让数据存储在硬盘上 做持久化存储。
解决办法:
存储到 localStorage:
通过监听页面的刷新操作,即beforeunload前存入本地localStorage, 页面加载时再从本地localStorage读取信息
created(){ (beforeunload是在页面刷新或者关闭时调用)
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(
this
.$store.state,JSON.parse(localStorage.getItem(
"messageStore"
)))
)
})
}
https://segmentfault.com/a/1190000018419414?utm_source=tag-newest
标签:存储,beforeunload,messageStore,localStorage,刷新,vuex,页面 来源: https://www.cnblogs.com/wangXinYuFarly/p/11823528.html