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的更改做出反应。有various ways可以避免这种情况，但最简单的方法是观察内部属性并将值也持久保存到localStorage。

执行此操作的一种正确方法是使用Vuex（Vue的官方状态管理）将数据存储到Vuex存储。然后，a Vuex plugin会将所有存储或部分存储持久存储在本地或会话存储中。 Vuex商店是反应式的，因此您只需在您的计算属性中观察商店的变化即可。

用vue-router重新加载组件

1 个答案: