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

Question

我想要我的视图，使用作为道具传递的 id 来查找商店中对象的属性。存储中的对象是异步出现的，因此该对象可能不会立即出现。我希望视图对对象的最终外观做出反应。

<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物体，而不是一次更换一个道具（我认为这是一个要求），但仍然没有运气。

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

Answer 1

突变遵循 Vue 的反应性规则

由于您正在看着它从空到有一些成员，因此您与 Vue 的变更检测警告发生了冲突。

Vue 无法检测属性添加或删除。

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