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

 

上一篇:WPF 最基本的前后台代码对照


下一篇:Vue中监听窗口关闭事件并在窗口关闭前发送请求