Question

我处于VueX状态，其中包含项目列表。例如：

{
   operations: Operation[]
}

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

在呈现列表（v-for）时，建议将整个项目作为道具还是仅传递id并让OperationItem从VueX？

基本上：

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

vs

<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"  
/>

我不确定这是否是一个好习惯，但是在这种情况下，它更灵活，您不需要为它提供结构化的对象即可渲染，只需赋予它所有的属性即可。 / p>

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

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

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

Answer 2

我想说整个项目。这样，您的组件无需知道数据来自何处，并且在数据不是来自Vuex的情况下就可以重用该组件。

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

2 个答案: