javascript - 使用 vue-router 重新加载组件

Question

我有一个使用 Vuejs 和 Vue-Router 的项目。当用户在(登录)系统中付款时，服务器返回一个包含 token 、用户名和名字的 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 的更改使用react。有various ways规避这个问题，但最简单的方法是观察内部属性并将值也保存到 localStorage。

执行此操作的一种正确方法是使用 Vuex (Vue 的官方状态管理)将数据存储到 Vuex 存储。那么就有a Vuex plugin将所有存储或部分存储保留在本地或 session 存储中。 Vuex 存储是响应式的，因此您只需在计算属性中观察存储的更改。