使用 vue-router 重新加载组件

Posted 2023-02-23

【中文标题】使用 vue-router 重新加载组件

【英文标题】：Reload component with 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 中。

【参考方案1】：

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

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