Как передать элемент из списка Vuex компоненту?

Question

Итак, у меня есть состояние Vuex, которое выглядит так:

state: {
  keylist: ['key1', 'key2', 'key3'],
  items: {
    key1: {title: "First Item"},
    key2: {title: "Second Item"},
    key3: {title: "Third Item"}
  }
}

И у меня есть компонент списка, на который ссылается root, например:

<event-list :list="this.$store.state.keylist"></event-list>

Компоненты определены так:

Vue.component('event-list', {
  template: "<ul><li v-for='key in list'>{{ key }}</li></ul>",
  props: {
    list: {
      type: Array,
      required: true
    }
  }
})

Теперь все это прекрасно отображает ключ.

Но, конечно же, я действительно хочу использовать компонент для каждого элемента, найденный по его ключу. И вот где я застрял. У меня есть элемент элемента, например, так:

Vue.component('event-list-item', {
  template: "<h4>{{ item.title }}</h4>",
  props: {
    item: {
      type: Object,
      required: true
    }
  }
})

Но я не могу понять, как перевести key в родительском компоненте в item в дочернем компоненте. Этот шаблон barfs на первой фигурной скобке:

<ul><li v-for='key in list'><event-list-item :item="this.$store.state.items.{{key}}"</li></ul>

И в любом случае это не выглядит как правильное решение! так что является правильным?

Answer 1

Для меня первое, что приходит на ум, это то, что ваш вложенный элемент в любом случае не имеет места для вставки. Возможно, вы захотите взглянуть на слоты для вложения таких компонентов: https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Во всяком случае, несколько соображений:

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

Vue.component('event-list-item', {   template: "<li v-for="item in list"><h4>{{ item.title }}</h4></li>

Хранилище считается единственным источником правды, поскольку доступ к нему должен быть проще из непосредственно затронутых компонентов, что избавляет вас от необходимости сдавать несколько реквизитов для нескольких слоев. Как и вы. Эта основа довольно хрупкая для глубоко вложенных компонентов.

Имейте в виду, что каждый компонент имеет свою область видимости, и они не разделяют то, что явно не передано.

Answer 2

Нет проблем с повторением свойств items объекта. Это будет работать так же, как итерация по массиву.

<ul>
  <li 
    v-for="item in items"
    :key="item.title"
  >
    <event-list-item :item="item" />
  </li>
</ul>

Для лучшей практики вы можете форматировать данные внутри геттера, назначать ключи и возвращать список, готовый к визуализации, чтобы дополнительная компонента не делегировалась компоненту.

Обратите внимание, что key, используемый в примере кода, предназначен для внутреннего использования Vue, поскольку он является зарезервированным специальным атрибутом и предлагается присутствовать при использовании циклов v-for.

Answer 3

Вы должны получить доступ к полям состояния items, например key:

   <ul><li v-for='key in list'><event-list-item :item='key' /></li></ul>

и в дочернем компоненте tht:

   template: "<h4>{{ store.state.items[item].title }}</h4>"