如果不刷新页面，Vuex状态不会更新 [英] Vuex state does not update without a page refresh

问题描述

我正在构建一个单页面应用程序，用户可以在其中看到不同的页面，具体取决于他们是否登录。登录调用工作正常，授权令牌保存在本地存储中。

设置：我已经设置了一个名为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状态不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！