Javascript 存储更改时未更新组件-Vuex

TLDR：

我录了一段视频来解释我的问题，如果有帮助的话。

导航栏组件未在存储更改时更新。

我使用v-if和v-else将我的组件分为两个部分。当用户登录时，v-if显示；当用户未登录时，v-else显示

当我登录时，服务器进行身份验证，客户端向存储提交一个变体，并设置用户和客户端令牌。设置此选项后，它会将状态为“userIsLoggedIn”的属性设置为true-此属性在navbar组件中计算。由于未知原因，除非我刷新页面，否则用户登录后Navbar组件不会更新（尽管isLoggedIn属性为true）

导航栏组件：

标志
玩
{{user.balance.toFixed（2）}
{{user.username}
轮廓
押金
注销
常见问题
登录
登记
常见问题
从“vuex”导入{mapGetters}；
导出默认值{
名称：“导航栏”，
数据（）{
返回{
用户：此.$store.state.user，
}
},
计算：{
…地图绘制者([
“伊斯洛格丁”，
])
},
方法：{
注销（）{
这是.store.dispatch（“setToken”，null）；
这是.store.dispatch（“setUser”，null）；
这是$router.push({
路径：“/”
})
}
}
}

我想我找到了问题所在。当用户登录时，您没有将isUserLoggedIn设置为true。因此，请执行一项操作，然后在用户成功登录时将isUserLoggedIn更改为true

行动

突变

然后在这些行的登录组件中更改以下内容：

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);

为此：

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);
this.$store.dispatch("setUserLogged");

---

显示执行此操作的部分。$store.dispatch（“setToken”）好的-我已经在“登录组件”的帖子中添加了代码。可能是变异出了问题吗？你可以使用类似的插件在浏览器中检查商店的状态。我下载了chrome工具，并按照建议做了。变异工作正常，状态正在正确更新。由于某些原因，一旦状态改变，v-if和v-else块就不会改变。如果我错了，请原谅，但你确定吗？我已经在setToken突变更新中将isUserLoggedIn状态设置为true-我尝试了您建议的方法。我没有工作：（我在我的项目和工作中也做了同样的事情。问题将出现在登录组件中。尝试删除async和所有其他内容，只向服务器发出登录请求。在callbar中“然后”在更改登录方法之前实际发送…在navbar组件中尝试将“user”属性设置为空字符串（“”）在计算方法中，从vuex商店获取用户。要做到这一点，还要创建另一个用于返回用户的getter嘿，我这样做了，它成功了。我需要设置一个计算方法，从商店获取用户，这非常有效。非常感谢。这整天都在困扰我。

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);
this.$store.dispatch("setUserLogged");