javascript - 为什么这个 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 反应）。

标签： javascriptvue.jsvuex

Answer 1

突变遵循 Vue 的反应规则

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

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

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