用vue-router重新加載組件

Question

我有一個使用Vuejs和Vue-Router的項目。 當用戶付款（登錄）系統時，服務器返回帶有令牌，用戶名和名字的文件Json，該文件存儲在localstorage中以用於以下請求。 名字在布局中用於在導航欄中顯示歡迎消息。 注銷后，本地存儲被清除，問題出在這里，當其他用戶在消息中付款時，歡迎使用新的名字重新加載。

<v-chip>{{bienvenida}}</v-chip>

---

computed: {
  bienvenida() {
    const user = JSON.parse(localStorage.getItem("user"));
    return user ? `Bienvenido ${user.firstName}` : "";
  }
}

Answer 1

LocalStorage是非反應性的，因此計算出的屬性不會對localStorage的變化做出反應。 有多種方法可以避免這種情況，但最簡單的方法是觀察內部屬性並將值也持久保存到localStorage。

一種適當的方法是使用Vuex （Vue的官方狀態管理）將數據存儲到Vuex存儲中。 然后有一個Vuex插件可將所有存儲或部分存儲持久存儲在本地或會話存儲中。 Vuex存儲是反應性的，因此您只需在您的計算屬性中觀察對存儲的更改即可。