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 равно нулю или не определено, то весь оператор this.$store.getters.userInfo?.likedProjects.includes(title) вернет undefined вместо того, чтобы выдавать ошибку.

Если likedProjects также может быть нулевым или неопределенным, то вам также необходимо использовать необязательную цепочку для этого свойства, то есть:

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}
}