1、vue项目中解决浏览器刷新vuex数据消失问题

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Hei_lovely_cat/article/details/102775171

vue项目中解决浏览器刷新vuex数据消失问题

1. 说明
   vuex中的数据经过浏览器刷新后会消失，所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中。

2. 操作
   打开App.vue,在created()加入:

//从浏览器缓存中取出全局变量的值            
this.store.dispatch("setUserName", localStorage.getItem("UserName"));         
//关闭/刷新之前，将vuex中全局变量存入浏览器缓存中            
window.addEventListener("beforeunload", () => {
localStorage.setItem("UserName", this.store.getters.getUserName);
});

3. 拓展
   如果项目中不需要vuex来监听参数的变化的话，可以舍弃vuex,直接存入浏览器localStorage

//存入浏览器
localStorage.setItem("UserName", UserName);

//从浏览器取出
localStorage.getItem("UserName")