如何更改 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方法，以便它可以更全局可用。