javascript - 为什么这个 Vue 计算属性不是响应式的？

Question

我希望我的 View 使用作为 prop 传递的 id 来查找商店中对象的属性。存储中的对象异步出现，因此该对象可能不会立即出现。我希望 View 对对象的最终外观使用react。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    widget () {
      let path = `widget/${this.id}`
      return this.$store.state.widgets[path]
    },
    title () {
      let widget = this.widget
      return (widget) ? widget.data().fullName : 'nothing to see here'
    }
  }
}
</script>

使用 vuex 调试工具，我可以观察商店小部件对象开始为空，然后使用 widgets: { 'widgets/someId': { ... } } 设置，但我的 vue 没有似乎没有接受变化。标题仍然是 == '没什么...'。

我尝试制作这些方法，但得到了相同的行为。我还尝试替换商店中的整个 widgets 对象，而不是一次替换一个 Prop (我认为这是一个要求)，但仍然没有运气。

我认为我的问题与 this one 非常相似，但答案太简洁了。它只是说“使用数据项”，但我真的不知道那是什么或如何使用它(或者为什么这会让 vue react )。

Answer 1

Mutations Follow Vue's Reactivity Rules

既然你看着它从空到有一些成员，你就与 Vue 的 change detection caveats 发生冲突了。 .

Vue cannot detect property addition or deletion.

您需要使用Vue.set添加或删除成员时，即使在 Vuex 中也是如此。