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