Vue - правильный способ объединить два разных типа данных - PullRequest
Новая
       33

Vue - правильный способ объединить два разных типа данных

0 голосов
/ 29 января 2019

Я создаю приложение, используя Vue CLI и Vuex.При первоначальной загрузке моего приложения сразу после аутентификации я получаю два типа данных: Messages и Events

В моем приложении есть место, где мне нужно объединить Messages и Events на основев хронологическом порядке с использованием атрибута created_at.

Это структура Messages: 

var messages = [
  {
    id: 1,
    name: 'Message 01',
    created_at: '2019-01-28T11:00:00+00:00'
  },
  {
    id: 2,
    name: 'Message 02',
    created_at: '2019-01-28T13:00:00+00:00'
  },
  {
    id: 3,
    name: 'Message 03',
    created_at: '2019-01-28T15:00:00+00:00'
  }
]

Это структура Events: 

var events = [
  {
    id: 1,
    name: 'Event 01',
    created_at: '2019-01-28T10:00:00+00:00'
  },
  {
    id: 2,
    name: 'Event 02',
    created_at: '2019-01-28T12:00:00+00:00'
  },
  {
    id: 3,
    name: 'Event 03',
    created_at: '2019-01-28T14:00:00+00:00'
  }
]

После слияния всего я хочу использовать цикл для отображения Messages и Events в хронологическом порядке.

Это html-структура, которая будет использоваться: 

.container{
  display: flex;
  flex-direction: column;
}

.container .message{
  background: red;
  margin-left: auto;
}

.container .event{
  background: blue;
  margin-right: auto;
}
<div class="container">
  <div class="message">Message</div>
  <div class="event">Event</div>
</div>

После получения этих данных из магазина, как правильно объединить оба?И после слияния, какой способ правильно цикл для отображения каждого Message или Event в вашем конкретном div?

1 Ответ

0 голосов
/ 29 января 2019

3 вещи, которые нужно сделать:

  • Нет необходимости напрямую преобразовывать данные API, использовать вычисляемые значения из 2 массивов.
  • Добавить идентификатор для информирования логики рендеринга о типе элемента в массиве,Подойдет логическое значение isMessage.
  • Добавьте новый уникальный идентификатор для элементов в массиве, если ваши идентификаторы для сообщений и событий могут быть похожими.

Если вы используете vuex, хороший способиспользовать геттеры, чтобы получить вычисленное значение.Здесь я приведу пример использования вычислений Vue. 

<template>
    <div>
        <div v-for="item in combinedArray" :key="item.combinedId">
            <div v-if="item.isMessage">this is a message</div>
            <div v-else>this is an event</div>
        </div>
    </div>
</template>
<script>
export default {
    props: [ 'messages', 'events' ],
    computed: {
        combinedArray() {
            const array = [
                ...this.messages.map(m => ({
                    combinedId: `message_${m.id}`,
                    isMessage: true,
                    ...m
                })),
                ...this.events.map(e => ({
                    combinedId: `event_${e.id}`,
                    isMessage: false,
                    ...e
                }))
            ]
            return array.sort((itemA, itemB) => new Date(itemA.created_at) - new Date(itemB.created_at))
        }
    }
}
</script>
...