vue.js - 使用VueX时将整个数据项与仅id作为Prop一起传递给Vue列表中的Prop

Question

我的VueX状态包含项列表。例如。:

{
   operations: Operation[]
}

我们需要将每个 Operation显示为列表中的一项。因此，我们有一个 OperationList组件和一个 OperationItem组件。

在呈现列表( v-for)时，是否建议将整个项目作为 Prop 或仅传递 id并让 OperationItem从 VueX读取数据？

基本上:

<operation-item v-for="operationId in operationIds" :id="operationId" :key="operationId"/>

与

<operation-item v-for="operation in operations" :operation="operation" :key="operation.id"/>

Answer 1

我认为这可能是一个优先选择，但是在我的项目中，我通常以这种方式通过所有组件的支持:

<operation-item 
  v-for="operation in operations"
  :key="operation.id"
  :prop1="operation.prop1" 
  :prop2="operation.prop2"
  :prop3="operation.prop3"  
/>

我不确定这是否是一个好习惯，但是在这种情况下，它更灵活，您不需要提供结构化的对象即可呈现它，而只需提供其所有属性。

有点像类构造函数，我将分别传递所有必需的参数，而不是将它们传递给 $option数组或 Settings类。

对于某些组件来说，让他们知道商店也没有意义，它们应该只是“愚蠢”的呈现组件。

我希望你已经明白我的意思了!