Может возникнуть путаница при выборе того, как следует использовать Vuex. Должны ли мы использовать его экономно или следует сбрасывать в него все состояние приложения?

Документация Vuex оставляет это решение за разработчиком, поскольку мы, разработчики, лучше всего знаем свои потребности в разработке. [ссылка]

Использование Vuex не означает, что вы должны помещать все состояние в Vuex. Хотя добавление большего количества состояний в Vuex делает ваши мутации состояния более явными и поддающимися отладке, иногда это также может сделать код более подробным и косвенным. Если часть состояния строго принадлежит одному компоненту, было бы неплохо оставить его как локальное состояние. Вы должны взвесить компромиссы и принять решения, соответствующие потребностям разработки вашего приложения.

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

Эта статья — попытка подробно рассказать о преимуществах и проблемах при использовании Vuex.

Преимущества:

  • Государство централизовано и поэтому более предсказуемо
  • Упрощает обмен данными между глубоко вложенными и несвязанными компонентами.
  • Расширение возможностей отладки с помощью богатого инструмента разработки

Проблемы:

  • Добавляет уровень косвенности для доступа к состоянию и, таким образом, увеличивает сложность кода.
  • Утечки памяти, когда компоненты не удаляют состояние отключения должным образом
  • Модульные тесты для компонентов становятся более сложными

Давайте рассмотрим эти проблемы с помощью простого приложения списка задач, которое отображает список текущих задач и позволяет добавлять новые задачи. Вот код компонента Todos.vue без хранилища Vuex.

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

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

Посмотрите, как этот код упрощается, когда мы не используем Vuex.

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

Да прибудет с тобой сила!

Использованная литература: