Вопрос по архитектуре приложений с Vue.js. Как правильнее?

Question

[Дмитрий Петрик]

Есть у меня один большой компонент, состоящий из кучи маленьких компонентов. Этот компонент передает какие-то исходные данные дочерним компонентам. Дочерние компоненты разгребают эти данные и отрисовываются как мне надо. Ели мне что-то нужно поменять в дочерних элементах, они генерируют события, основной компонент их ловит, изменяет исходные данные и дочерние перерисовываются.
Беда в том, что дочерние компоненты генерят много разных событий, и я уже начинаю путаться во всех обработчиках основного компонента. Уже несколько страниц одних только обработчиков. Начинаю подозревать что делаю что-то не так. Может эти обработчики можно куда-то в отдельные файлы вынести? Как лучше код структурировать во Vuejs? Может есть какие-то бест-практисы? Официальную доку я уже всю прочитал

Answer 1

[Evgeny Kulakov]

Напишу свои мысли:

У ваc скорее всего уже используется vuex для хранения состояния. Если нет, то стоит начать.

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

Comments

[Дмитрий Петрик]

Спасибо за совет

[Yeldos Adetbekov]

Прислушайтесь к Евгению. Дело говорит.

[Evgeny Kulakov]

Дмитрий Петрик:
Еще один момент для лучшей реюзабельности компонентов - их условное разделение на:

• Компоненты-коннекторы
  
• Простые компоненты
  

Отличие в том, что первые взаимодействуют с хранилищем, вторые нет.
Простые компоненты, можно легко перенести в другой проект - они не связаны со стором.

[Антон Антон]

Evgeny Kulakov: про реюзабельные "простые компоненты" добавлю, что <slot> в vuejs - ОЧЕНЬ мощная штука

Answer 2

[ozknemoy]

базовая структура есть тут https://github.com/vuejs/vue-hackernews-2.0 от нее и следует отталкиваться. и уже какие то свои штрихи добавлять по мере появления опыта

Comments

[Дмитрий Петрик]

Спасибо, посмотрю

Answer 3

[Антон Антон]

vuex + деление его на модули пробовали?

Comments

[Дмитрий Петрик]

Что вы подразумеваете под модулями?

[E-em]

Дмитрий Петрик: https://vuex.vuejs.org/ru/modules.html

Answer 4

[lega]

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