Перевод статьи DavidMM : Vue data flow — How it works?

Когда я изучал Vue, одной из самых сложных вещей было понимание того, как передавать данные во Vue. EventBus, Vuex, Props … Что это такое? Что из них я должен использовать?

Давайте узнаем их различия и когда нужно использовать каждый из них.

---

Внутри компонента

Это самое базовая использование Vue. Одна страница с одним компонентом. Это похоже на Vanilla Javascript с оттенком реактивности (как только вы изменяете объект, представление обновляется).

Вот часть HTML:

А вот и Javascript:

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

В 23-й строке раздела HTML вы найдете функцию «on-click», которая переключает текущее задание между завершенным и незавершенным состояниями, а в строке 25 – другое, чтобы установить текущее задание для редактирования. Двухстороннее связывание данных делает все работу.

Методы взаимодействуют и изменяют данные (массив «todos»), достигая To-Do через «this». Как я уже сказал, это выглядит почти так же как если бы это был бы обычный Javascript.

Но что, если у нас есть два компонента в разных местах? Или три? Что, если один компонент является родительским для другого, и нам нужно передавать информацию между компонентами?

---

Props и $emit – для компонентов родителей и их потомков

Допустим, у нас есть представление, разделенное на несколько компонентов, с дочерними компонентами внутри компонентов, вот как то так:

Как видите, оранжево-желтый основной компонент действует как корень каждого компонента. Внутри 3 компонента: красный, фиолетовый и зеленый. Некоторые из компонентов имеют дочерний компонент, что делает его веб-приложением 3 уровня.

Что делать, если вы хотите передать информацию из красного компонента в один из дочерних зеленых компонентов. Как бы вы это сделали?

Вы можете отправить информацию родителю с помощью $emit, а затем дочернему компоненту с помощью props. Это будет выглядеть как то так:

Вот как я использовал $emit и props:

Выглядит немного сложновато, но в действительности все довольно просто, когда вы освоитесь. Отправляйте свои данные с помощью $emit в верхний компонент, а вниз с помощью props.

Но что, если мы хотим отправить информацию между компонентами с несколькими уровнями между ними? Нам нужно будет использовать 4 $emits и 2 props?

Ну, конечно так можно сделать. Но это было бы сумасшествием.

Лучше в этом случае использовать EventBus.

---

EventBus – из любого места в любое место

Глобальный EventBus работает как «Родитель всех компонентов». Этот компонент имеет доступ ко всем компонентам, в которые он был загружен.

Вместо того, чтобы идти вверх и вниз по компонентам для отправки информации, мы можем отправить событие в EventBus и установить компоненты, которые мы хотим прослушивать для этого события.

Вот как это работает:

Намного проще, не правда ли? Просто добавьте компонент Vue с именем «EventBus» в ваш main.js и используйте его как способ отправки / получения сигналов от компонентов.

Хотя это отличный способ может работать с небольшими и средними приложениями, но более стандартный способ это использование Vuex

---

Vuex – наш менеджер состояний

Vuex – это шаблон управления состоянием Vue для приложений Vue.js.

Думайте о нем как о централизованном хранилище данных или «единственном источнике правды».

Vuex действует как единое центральное хранилище для всех компонентов в одном приложении. Кроме того, отслеживает все методы (или мутации) и помогает вам управлять всеми данными в вашем веб-приложении.

Если вы используете Vue Devtools, вы можете использовать их интересные функции, такие как отслеживание или просмотр всех данных, хранящихся в Vuex.

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

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

Давайте посмотрим, как я использовал его в реальной обстановке:

Снова довольно просто. Мы загружаем все функции и данные в файл store.js, который станет нашим «Единственным источником правды». Затем для каждого необходимого компонента мы загрузим нужные нам части.

---

Какой из подходов я должен использовать?

Как всегда ответ зависит от ваших потребностей … .

Вы можете использовать любой из них в своем проекте, но каждый подходит для любого сценария.

• Один компонент: так же, как вы бы использовали Vanilla Javascript
• Props и $emit: если у вас есть несколько компонентов рядом друг с другом. Props отлично работает, когда у вас есть несколько компонентов, и нам нужно передавать разные данные (например, у нас есть 4 таблицы с разными наборами данных в каждой)
• EventBus: Если у вас есть более чем пару компонентов, если структура вашего веб-приложения устанавливает ваши компоненты более горизонтально (родственные компоненты вместо родительских), чем по вертикали, и запускать функции (например, для активации уведомления)
• Vuex: Если у вас есть веб-приложение от среднего до большого размера, где вы используете сложную логику и хотите отслеживать все изменения ваших данных, использовать API и т. д.

Опыт научит вас, когда использовать каждый из них.

Например, я использую Vuex в каждом приложении, даже в небольших (я люблю отслеживать свои данные), так же использую EventBus, чтобы запускать функции для определенных событий, когда я создаю компонент, который я использую несколько раз с различными данными.

Заключение

Читать (и писать) о том, какие методы обработки данных мы можем использовать, было круто, но вы должны практиковаться. Я написал небольшой пост, более ориентированный на код, чем этот, где я объяснял теорию. Вы можете прочитать о теории передачи данных здесь: Passing data in Vue

И, конечно же, у нас есть отличная документация по Vue:

Props и $emit

Global Event bus

Vuex