vuex中页面刷新数据丢失问题

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

---

前言

---

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

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

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

问题出处：

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


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

如何解决

• 方法： 通过vuex中的数据直接保存到浏览器中localStorage
• 页面刷新再次请求数据，动态更新vuex数据

在App.vue中添加

<script>
export default {
   
   
  name: 'App',
    created() {
   
   
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem('store')