用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存储是反应性的，因此您只需在您的计算属性中观察对存储的更改即可。