Javascript 为什么此Vue计算属性不是反应性的？

我希望我的视图使用作为道具传递的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>

{{title}}
导出默认值{
道具：['id']，
计算：{
小部件（）{
let path=`widget/${this.id}`
返回此。$store.state.widgets[path]
},
标题（）{
让widget=this.widget
return（widget）？widget.data（）
}
}
}

使用vuex调试工具，我可以看到StoreWidgets对象开始为空，然后使用

小部件：{'widgets/someId'：{…}}

进行设置，但我的vue似乎没有收到更改。标题仍然==“没有…”

我尝试了这些方法，但我得到了同样的行为。我还试着替换商店中的整个

小部件

对象，而不是一次替换一个道具（我认为这是一个要求），但仍然没有成功

---

我想我的问题和你的很相似，但答案太简洁了。它只是说“使用一个数据项”，但我真的不知道它是什么或如何使用它（或者为什么它会使vue反应性）。

您的小部件很可能不是反应性的，因为

widget

本身不会改变，而且

widget.data

也不会改变，因为它是您定义的函数。调用

data

时，Vue不会“看到”数据中的更改，因为它是一个函数

有几种方法可以使小部件具有反应性。一种是通过预计算数据并返回一个没有函数的对象。这可能意味着当您有很多小部件时，性能会下降，即使您不需要它们中的大多数数据

另一种方法是潜在地使用相对较新的函数/方法。您可以使用

widget.data

获取数据，并使用类似

{
  id: 1,
  get data() {
    // Whatever was in your function before
  }
}

---

请记住，这是（我相信）Ecmascript 6的一项功能，因此您可能需要通过babel运行此功能，以便与所有相关浏览器兼容。

您的小部件很可能不是被动的，因为

小部件本身不会改变，也不会改变
小部件。数据
因为它是您定义的函数。调用
data
时，Vue不会“看到”数据中的更改，因为它是一个函数

有几种方法可以使小部件具有反应性。一种是通过预计算数据并返回一个没有函数的对象。这可能意味着当您有很多小部件时，性能会下降，即使您不需要它们中的大多数数据

另一种方法是潜在地使用相对较新的函数/方法。您可以使用
widget.data
获取数据，并使用类似

{
  id: 1,
  get data() {
    // Whatever was in your function before
  }
}

请记住，这是（我相信）Ecmascript 6的一项功能，因此您可能需要通过babel运行此功能，以便与所有相关浏览器兼容。

因为你看着它从空变为有一些成员，你就和Vue的冲突了

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

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

因为你看着它从空变为有一些成员，你就和Vue的冲突了

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

添加或删除成员时需要使用，即使在Vuex中也是如此。
能否显示小部件的Vuex存储代码？是否考虑使用？它们的优点是仅根据存储更改重新评估。您可以使用公开其他getter的第二个参数“链接”getter。您可以根据各自计算的
小部件
计算
标题
。是的，计算属性不是很被动。不久前我也有同样的问题。我最终使用了
观察者
：@AlexanderStaroselsky-我确实尝试了一个具有相同结果的getter。我认为原因是我的getter需要一个参数（路径
），所以我的getter需要返回一个函数，并且（可能是？？？）它会停止响应？你能为小部件显示vuex存储代码吗？你考虑过使用它吗？它们的优点是仅根据存储更改重新评估。您可以使用公开其他getter的第二个参数“链接”getter。您可以根据各自计算的
小部件
计算
标题
。是的，计算属性不是很被动。不久前我也有同样的问题。我最终使用了
观察者
：@AlexanderStaroselsky-我确实尝试了一个具有相同结果的getter。我想原因是我的getter需要一个参数（路径
），所以我的getter需要返回一个函数，并且（可能是？？？）这会阻止它的反应？谢谢。这就解决了！我只是想澄清一下，我的商店设置器中有几位代码，上面写着
state.someWidget.someProp='foobar'
。要变成被动的，我是否应该将所有这些更改为
Vue.set（state.someWidget，'someProp，'foobar'）
？如果您设置的属性已经存在，它将是被动的。如果添加或删除属性（在创建包含对象之后），则只需设置
。谢谢。这就解决了！我只是想澄清一下，我的商店设置器中有几位代码，上面写着
state.someWidget.someProp='foobar'
。要变成被动的，我是否应该将所有这些更改为
Vue.set（state.someWidget，'someProp，'foobar'）
？如果您设置的属性已经存在，它将是被动的。如果添加或删除属性（在创建包含对象之后），则只需设置
。谢谢。我一直使用data（）函数，因为这些对象来自google firestore。事实证明，使用Vue.set（）足以让我的Vue看到更改（并再次调用data（）函数）。谢谢。我一直使用data（）函数，因为这些对象来自google firestore