使用 vue-router 重新加载组件答案

【问题标题】：Reload component with vue-router使用 vue-router 重新加载组件
【发布时间】：2019-04-27 08:21:59
【问题描述】：

我有一个使用 Vuejs 和 Vue-Router 的项目。当用户支付（登录）系统时，服务器返回一个包含令牌、用户名和名字的文件 Json，该文件存储在 localstorage 中以供后续请求使用。第一个名称用于布局中，用于在导航栏中显示欢迎消息。注销后，localstorage 被清除，问题就出在这里，当其他用户在欢迎消息中付款时，不使用新的名字重新加载。

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

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

【问题讨论】：

VueJS - how to watch a value in localStorage?的可能重复
我会使用 Vuex 和 vuex-persist。您反应性地绑定到 vuex getter 并让 vuex-persist 处理将状态存储在 localstorage 中。

标签： javascript node.js vue.js components vue-router

【解决方案1】：

LocalStorage 不是反应式的，因此计算属性不会对 localStorage 的更改做出反应。有various ways 可以规避这一点，但最简单的方法是查看内部属性并将值也保存到 localStorage。

一种正确的方法是使用Vuex（Vue 的官方状态管理）将您的数据存储到 Vuex 存储中。然后有a Vuex plugin 将所有存储或部分存储在本地或会话存储中。 Vuex store 是响应式的，所以你可以在你的计算属性中观察 store 的变化。

【讨论】：