При использовании VueX передайте весь элемент данных против просто id как проп в списке Vue.

Question

У меня есть состояние 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"/>

Answer 1

Я бы сказал, передать весь предмет.Таким образом, вашему компоненту не нужно знать, откуда поступили данные, и вы сможете повторно использовать компонент в ситуациях, когда данные не поступили из Vuex.

Answer 2

Я думаю, что это может быть предпочтительный выбор, но в своих проектах я обычно пропускаю все опоры компонентов следующим образом:

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

Я не уверен, что это хорошая практика или нет, но вв этом случае он более гибкий, вам не нужно давать структурированный объект для его рендеринга, вам просто нужно дать ему все его свойства.

Немного похоже на конструктор класса, я бы передал всенеобходимые параметры отдельно, вместо того, чтобы передавать их в массиве $option или Settings.

Для некоторых компонентов также не имеет смысла знать о хранилище, они должны быть"тупые" визуализированные компоненты.

Надеюсь, это достаточно ясно, чтобы вы поняли мою точку зрения!