VUEX，当$store.state为null时该怎么办

Question

当用户未登录我的网站时，user的状态设置为null。然而，这在一些页面上引发了很多问题，我想看看this.$store.user

例如，如果我要进行一次简单的检查，比如

if (this.$store.getters.userInfo.likedProjects.includes(title)) {this.hasLiked = true}

并且用户没有登录(因此，默认情况下将用户的状态设置为null(我得到了这个错误；

_this.$store.getters.userInfo is null

我应该如何正确处理这类问题，这样我的控制台就不会被打字错误淹没？

我最初的想法是首先检查if user.loggedIn == true，并将所有内容都封装在其中，但这似乎非常混乱，只是为了避免一些错误。。。

Answer 1

使用可选链接，该链接在TypeScript 3.7+中可用：

if (this.$store.getters.userInfo?.likedProjects.includes(title)) {
this.hasLiked = true;
}

如果userInfo为null或未定义，那么整个语句this.$store.getters.userInfo?.likedProjects.includes(title)将返回undefined，而不是抛出错误。

如果likedProjects也可能为null或未定义，那么您也需要在该属性上使用可选链接，即：

if (this.$store.getters.userInfo?.likedProjects?.includes(title)) {
this.hasLiked = true;
}

Answer 2

if(this.$store.getters.userInfo){
if (this.$store.getters.userInfo.likedProjects.includes(title)) {this.hasLiked = true}
}