本文介绍了如果不刷新页面，Vuex状态不会更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个单页面应用程序，用户可以在其中看到不同的页面，具体取决于他们是否登录。登录调用工作正常，授权令牌保存在本地存储中。
设置：我已经设置了一个名为loggedIn的getter，如果在状态上设置了令牌，则返回true。以下代码与我的auth.js存储模块中的代码完全相同：
const state = {
accessToken: TokenService.getToken(),
}
const getters = {
loggedIn: (state) => {
return state.accessToken ? true : false
},
TokenService具有以下内容：
getToken() {
return localStorage.getItem(TOKEN_KEY)
}
问题：当用户登录时，令牌被正确保存在本地存储中(我可以看到)。但是，DevTools中的Vuex面板将getterloggedIn显示为false，将accessToken显示为undefined。当我手动刷新页面时，问题会自行修复。然后将正确填充存储区。
我做错了什么？我需要商店是被动的，这样我就可以根据loggedIngetter显示一些页面或其他页面。
推荐答案
本地存储不是反应性数据，所以当它更改时，Vuex存储无法获得通知。
发生的情况是，当您的应用加载getToken()在一开始就被调用时，由于用户尚未登录，因此它会返回undefined，当用户登录时，本地存储会更新，但getToken()不会再次调用。
但是！现在您在本地存储中有了数据，所以当您手动刷新页面时，将调用getToken()并返回Truthy值。
您可以做的是编写一个action来更新accessToken，并在用户登录时调用它。
如下所示：
api.getToken(URL, userData).then((result) => {
// if user is logged in successfully call the action
if (result) this.$store.dispatch('auth/updateAccessToken');
})
这篇关于如果不刷新页面，Vuex状态不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！