如果不刷新页面,Vuex状态不会更新

2022-03-03 00:00:00 vue.js 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');
})

相关文章