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