VueX 사용 시 Vue 목록에서 Prop로 ID만 전달하고 전체 데이터 항목 전달

VueX 사용 시 Vue 목록에서 Prop로 ID만 전달하고 전체 데이터 항목 전달

나는 가지고 있다VueX항목 목록을 포함하는 상태.예:

{
   operations: Operation[]
}

각각을 표시해야 합니다.Operation목록 내의 항목으로.그래서 우리는OperationList컴포넌트와OperationItem요소.

리스트의 렌더링에 관해서는 (v-for전체 아이템을 소품으로 건네는 것이 좋습니까?아니면 그냥 건네주는 것이 좋습니까?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"/>

선호하는 선택이라고 생각합니다만, 제 프로젝트에서는 보통 컴포넌트의 모든 프로포넌트를 그 방법으로 통과시킵니다.

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

이것이 좋은 프랙티스인지 아닌지는 잘 모르겠지만, 이 경우 더 유연합니다. 렌더링하기 위해 구조화된 객체를 지정할 필요는 없습니다.모든 속성을 부여하기만 하면 됩니다.

클래스 컨스트럭터처럼 필요한 파라미터는 모두 전달하지 않고 개별적으로 전달합니다.$option배열 또는Settings학급.

일부 컴포넌트에서는 스토어를 인식하는 것도 의미가 없습니다.그냥 렌더링된 컴포넌트여야 합니다.

당신이 내 요점을 충분히 이해했으면 좋겠어요!

전체 항목을 통과해야 할 것 같습니다.이렇게 하면 데이터가 어디서 왔는지 컴포넌트가 알 필요가 없어지고 Vuex에서 데이터가 전송되지 않은 상황에서 컴포넌트를 재사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/55656944/pass-entire-data-item-vs-just-id-as-prop-in-vue-list-when-using-vuex