vuex中页面刷新数据丢失问题(1)，架构师必备技能

提示：解决vuex中页面刷新数据丢失问题，this.$route 和 this.$router的区别

文章目录

• 前言

• 一、如何解决vuex中页面刷新数据丢失问题

• • 问题出处：

• 如何解决

• 二、`this.KaTeX parse error: Expected group as argument to '\`' at position 8: route\` ̲和 \`this.router`的区别

• • this.$router

• this.$route

---

前言

===============================================================

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何解决vuex中页面刷新数据丢失问题

==================================================================================

一般在登陆成功后需要把信息，个人信息，作为全局的共享数据。但是页面一刷新的时候，vuex的数据会重新初始化，导致数据的丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新的时候，页面会重新加载vue实例，vuex里的数据就会丢失。

问题出处：

---

当登录之后，通过计算属性实现响应式的数据变化，再用辅助函数获取vuex中的username

但是页面一刷新数据不再显示，数据丢失

如何解决

---

• 方法： 通过vuex中的数据直接保存到浏览器中localStorage

• 页面刷新再次请求数据，动态更新vuex数据

在App.vue中添加