Как следить за значением, которое зависит от другого значения vue?

Question

Во-первых, извините за расплывчатое название; Я не мог придумать действительно лаконичного. Вот моя ситуация:

Допустим, у меня есть пользователи, темы и комментарии в магазине vuex. У пользователей есть имена, список тем, а также топи c, которые они выбрали в данный момент:

users: {
  1: { 
      name: 'Tom',
      topics: [1, 2],
      selectedTopic: null // set to 1 and then 2 when user clicks "next"
    },
  2: {... }
},
topics:
  1: { 
      title: 'Post!',
      comments: [1, 2],
      selectedComment: null
    },
  2: { ... }
},
comments:
  1: { 
      title: 'Cool!'
    },
  2: { ... }
}

Если пользователь выбран, я хочу показать его имя. Если пользователь также выбирает топи c, этот топи c также должен отображаться; они также могут перемещаться по темам. Для каждого топи c они могут таким же образом прокручивать комментарии. Таким образом:

computed: {
  // some getters
  // ...
  user () {
    return this.getUser(this.userId)
  },
  topic () {
    return this.getTopic(this.user.topics[this.user.selectedTopic])
  },
  comment () {
    return this.getComment(this.topic.comments(this.topic.selectedComment])
  }

В этом случае зацикливание работает, но консоль показывает TypeError: «this.user.topics is undefined» или »this.user. selectedTopicis undefined " в начале (только иногда), что, конечно, верно, поскольку мы еще не выбрали пользователя. С другой стороны, если я заменю это на

  topic () {
    if (this.user) return this.getTopic(this.user.topics[this.user.selectedTopic])
  }

, я не получу никаких ошибок, но и значение не будет обновляться при изменении выбранного topi c. Есть ли хороший способ решить эту проблему?

Answer 1

На основе комментария от Иво Гелова , я пришел к

return this.getTopic((this.user.topics || {})[this.user.selectedTopic])

Кажется, это помогает.