如果不刷新页面,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
。当我手动刷新页面时,问题会自行修复。然后将正确填充存储区。
我做错了什么?我需要商店是被动的,这样我就可以根据loggedIn
getter显示一些页面或其他页面。
解决方案
本地存储不是反应性数据,所以当它更改时,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');
})
相关文章