Когда я изучал Vue, одной из самых сложных вещей было понять, как работает поток данных Vue. EventBus, Vuex, Props… Что это все? Какой мне использовать?
Давайте узнаем их различия и когда использовать каждый из них.
Внутри компонента
Это самый простой способ использования Vue. Одна страница с одним компонентом. Это похоже на ванильный Javascript с легкой реактивностью (как только вы изменяете объект, вид обновляется).
Вот часть HTML:
А вот и Javascript:
Как видите, это довольно просто. Здесь используются только два метода: первый для добавления, а второй для удаления To-Dos.
В 23-й строке раздела HTML вы найдете функцию по щелчку для переключения текущего To-Do между завершенным и незавершенным состояниями, а в строке 25 - другую, чтобы установить текущее To-Do как редактируемое, но Двусторонняя привязка данных делает все.
Методы взаимодействуют и изменяют данные (массив «To-Dos»), достигая To-Do через «this». Как я уже сказал, почти как если бы это был обычный Javascript.
Но что, если у нас есть два компонента в разных местах? Или три? Что, если один компонент является родительским для другого, и нам нужно передавать информацию вниз и вверх?
Props и $ emit - компоненты для родителей и детей
Допустим, у нас есть представление, разделенное на несколько компонентов, с дочерними компонентами внутри компонентов, примерно так:
Как видите, оранжево-желтый главный компонент действует как корень каждого компонента. Внутри 3 компонента: красный, фиолетовый и зеленый. В некоторых компонентах есть дочерний компонент, что делает его трехуровневым веб-приложением.
Что делать, если вы хотите передать информацию от красного компонента одному из дочерних зеленых компонентов. Как бы ты это сделал?
Вы можете отправить информацию родителю с помощью $ emit, а затем дочернему элементу с помощью props. Это выглядело бы так:
Вот как я использовал $ emit и props:
Немного сложно, но это действительно легко, когда вы освоитесь. Отправляйте данные вверх с помощью $ emit и вниз с помощью props. Вот и все.
Но что, если мы хотим передавать информацию между компонентами с несколькими уровнями между ними? Мы создаем 4 $ emits и 2 props?
Что ж, можем. Это было бы безумием.
Лучше используйте EventBus.
EventBus - откуда угодно и куда угодно
Global EventBus работает как «родительский элемент для всех компонентов». Этот компонент будет иметь доступ ко всем компонентам, в которые он загружен.
Вместо того, чтобы перемещаться по компонентам для отправки информации, мы можем отправить событие в EventBus и установить компоненты, которые мы хотим прослушивать для этого события.
От одного компонента к EventBus и от него к компоненту. Без компонентов, слушающих события, нам не нужно
Вот как это работает:
Легче, правда? Просто добавьте компонент Vue под названием «EventBus» в свой main.js и используйте его как способ отправки / получения сигналов от компонентов.
Хотя это отличный способ работать с небольшими и средними сайтами, когда мы хотим стать серьезными, нам нужно использовать Vuex.
Vuex - Наш государственный менеджер
Vuex - это шаблон управления состоянием Vue для приложений Vue.js.
Думайте об этом как о централизованном хранилище данных или «Едином источнике истины».
Vuex действует как единое центральное хранилище для всех компонентов в одном приложении. Кроме того, отслеживает все используемые методы (или мутации) и помогает вам управлять всеми данными в вашем веб-приложении.
Если вы используете Vue Devtools, вы можете использовать их интересные функции, такие как отслеживание или просмотр всех данных, хранящихся в Vuex.
Здесь вы увидите запущенные методы, какие данные и методы в настоящее время хранятся в Vuex, и сможете вернуться, чтобы повторить свои шаги, изменить текущие данные и т. Д.
Хотя это делает веб-приложение немного более сложным, добавляя накладные расходы, это очень помогает с разделением всей логики в один файл, предоставлением доступа к нескольким независимым компонентам и многому другому.
Давайте посмотрим, как я использовал это в реальных условиях:
Снова довольно просто. Мы загружаем все функции и данные в файл store.js, который будет нашим «Единым источником истины». Затем по каждому необходимому компоненту мы загрузим нужные нам части.
Какой мне использовать?
Как много вопросов… смотря как.
Вы можете использовать любой из них в своем проекте, но каждый подходит для разных сценариев.
- Однокомпонентный. То же, что и обычный Javascript.
- Props и $ emit: если у вас есть несколько компонентов рядом друг с другом. Реквизиты отлично работают, когда у вас есть несколько компонентов, но нам нужно передавать разные данные (например, у нас есть 4 таблицы с разными наборами данных в каждой)
- EventBus: если у вас более нескольких компонентов, если структура вашего веб-приложения устанавливает ваши компоненты более горизонтально (родственные компоненты вместо родительских), чем вертикально, и для запуска функций (например, для активации уведомления)
- Vuex: если у вас есть среднее или большое веб-приложение, где у вас сложная логика и когда вы хотите отслеживать все мутации ваших данных, вызовите API и т. д.
Опыт научит вас, когда использовать каждый из них.
Например, я использую Vuex в каждом приложении, даже в небольших (я люблю отслеживать свои данные), EventBus для запуска функций для определенных событий и свойств, когда я создаю компонент, который я использую несколько раз с разными данными.
Заключение
Читать (и писать) о том, какие методы обработки данных мы можем использовать, было круто, но вам нужно практиковаться. Я написал небольшой пост, более ориентированный на код, чем этот, где я объяснил теорию. Вы можете прочитать это здесь: Передача данных во Vue
И, конечно же, у нас есть отличная документация по Vue:
