Vue最佳做法。我应该作为道具传递给组件什么

Question

例如，我有一个简单的TODO应用程序。 由Task组件表示的任务。作为存储，我使用Vuex。

对于每个任务，我都存储

之类的结构

{
   id: 999,
   label: 'My super task',
   done: true
}

问题是我必须作为属性传递给组件的内容-仅id（然后从存储中获取其他数据）还是整个数据数组？

Answer 1

1. 传递整个数据将使您的java.lang.UnsupportedOperationException: Can not update object of type com.example.MyObject (by deserializer of type com.fasterxml.jackson.databind.deser.AbstractDeserializer) at com.fasterxml.jackson.databind.JsonDeserializer.deserialize(JsonDeserializer.java:126) ~[jackson-databind-2.8.8.jar:2.8.8] at com.example.MyDeserializer.deserialize(MyDeserializer.java) ~[classes/:na] 组件独立于商店。
2. 仅传递Task个任务，将使您的id组件依赖于存储任务数据。

由于Task代表一张卡，我认为使其依赖于存储将增加对存储的调用，因为Task个任务的数量将调用存储的数据。

最好一次从存储中获取数据，然后使用n指令枚举数据并将整个v-for对象传递给您的task组件。

Answer 2

因此您可以根据自己的喜好通过它。请记住，如果您使用的是Vuex，则无需传递任何内容作为道具，因为您拥有真理的主要来源。相反，您可以直接从州打电话或使用吸气剂。

在子组件内部，您可以使用模板中的$store和脚本中的this.$store来引用商店。

例如： const myTasks = this.$store.state.tasks（如果tasks是某种数组或集合）

const myTask = this.$store.state.tasks[0]

然后您有myTask.id，myTask.label等。

如果您需要更具体的示例，请发布更多代码，并让我知道。