VueX，$store.state 為空時怎么辦

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

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

Answer 2

使用可選鏈，它在 TypeScript 3.7+ 中可用：

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

如果userInfo為 null 或 undefined，則整個語句this.$store.getters.userInfo?.likedProjects.includes(title)將返回undefined而不是拋出錯誤。

如果likedProjects也可能為空或未定義，那么您也需要在該屬性上使用可選鏈，即：

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