我有一个使用 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}` : "";
}
}
最佳答案
LocalStorage 不是响应式的,因此计算属性不会对 localStorage 的更改使用react。有various ways规避这个问题,但最简单的方法是观察内部属性并将值也保存到 localStorage。
执行此操作的一种正确方法是使用 Vuex (Vue 的官方状态管理)将数据存储到 Vuex 存储。那么就有a Vuex plugin将所有存储或部分存储保留在本地或 session 存储中。 Vuex 存储是响应式的,因此您只需在计算属性中观察存储的更改。
关于javascript - 使用 vue-router 重新加载组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53468414/