如何更改 vue-component 中的数据

Question

在 Vue 组件中，我有一些来自 localStorage 的数据。

if (localStorage.getItem("user") !== null) {
  const obj_user = localStorage.getItem('user');
  var user = JSON.parse(obj_user);
} else {
  user = null;
}
return {
  user
}

在这个组件之后，我必须检查这些数据。 我这样做

  <li v-if="!user"><a href="/login">Login</a></li>
  <li v-if="user">
    <a href="#"><span>{{user.name}}</span></a>
  </li>

但数据不会立即改变，而只会在页面重新加载后才会改变。 在我登录页面并将用户重定向到另一个页面后，我仍然看到登录链接。 我究竟做错了什么？ 也许还有其他方法可以检查组件中本地存储中的 output 数据？ 先感谢您。

Answer 1

看起来问题可能与您的user变量不是一段反应性有状态数据的方式有关。 您的问题中没有足够的代码让我们确定这一点，但看起来您已经接近掌握在 Vue 中执行此操作的正确方法。

我想我的解决方案是这样的......

export default {
  data() {
    return {
      user: null,
    }
  },
  methods: {
    loadUser() {
      let user = null;
      if (localStorage.getItem("user")) {
        const obj_user = localStorage.getItem("user");
        user = JSON.parse(obj_user);
      }
      this.user = user;
    }
  },
  created() {
    this.loadUser();
  }
}

我将user保存在data区域中，以便模板在值更改时对其做出反应。

loadUser方法是分开的，因此可以从不同的地方调用它，比如从用户登录事件中调用，但是我确保从组件的created事件中调用它。

实际上，我倾向于将user放入 Vuex 存储和操作中的loadUser方法，以便它可以更全局可用。