Стоит ли использовать Vuex для передачи данных между компонентами?

Question

[roaddd]

Хочу страницу разделить на компоненты для читабельности. При этом стараться общаться через пропсы или использовать Vuex? А при смене роута обнулять state, чтобы не таскать огромные данные от апи. Как вы общаетесь между компонентами в large scale проектах?

Comments

[no_one_safe]

Стоит. Проще будет поддерживать.

Answer 1

[Дима Паутов]

Компоненты не должны общаться между собой, только в крайнем на то случае.
Компоненты должны выкидывать события(emit), что бы можно было получать в родителе какие-то данные и прокидывать данные в сам компонент(props). Компоненты должны быть независимыми, за исключением каких-то UI компонентов, где могут существовать зависимости ребёнка от родителя.

Если у вас большой проект, vuex очень удобен. Т.к. позволяет выделить отдельный слой для работы с данными API.
Если у вас маленький проект, то тут на своё усмотрение.

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

Моё мнение, что лучше использовать Vuex всегда, если вы работаете с API, не все будут согласны с этим. Но его использование делает проще понимание проекта, чем без. Если у вас просто маленький блок на сайте, который просто реализует какую-то небольшую задачу, редактор какой нибудь, опрос, или ещё что-то, vuex не нужен.

P.S. С vuex нужно уметь работать. Если вы просто будете из vuex получать данные внутри каждого компонента, кашу вы не сварите.

Answer 2

[BitRayDever]

Использование стейт менеджера напрямую укрепляет связанность. Это плохо.
Например у вас есть какой-то компонент, в котором данные тянутся прямо из Vuex. На первых порах все нормально, но тут возникает ситуация, когда этот же компонент используется в другом месте, но использует совсем другие данные. Придется рефакторить.

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