如何更改 vue-component 中的数据

Question

在 Vue 组件中，我有一些来自本地存储的数据。

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>

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

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 方法放入一个操作中，以便它可以在全球范围内更广泛地使用。