Может возникнуть путаница при выборе того, как следует использовать Vuex. Должны ли мы использовать его экономно или следует сбрасывать в него все состояние приложения?
Документация Vuex оставляет это решение за разработчиком, поскольку мы, разработчики, лучше всего знаем свои потребности в разработке. [ссылка]
Использование Vuex не означает, что вы должны помещать все состояние в Vuex. Хотя добавление большего количества состояний в Vuex делает ваши мутации состояния более явными и поддающимися отладке, иногда это также может сделать код более подробным и косвенным. Если часть состояния строго принадлежит одному компоненту, было бы неплохо оставить его как локальное состояние. Вы должны взвесить компромиссы и принять решения, соответствующие потребностям разработки вашего приложения.
Есть очень хорошая статья Маркуса Оберленера, в которой предлагается рабочий процесс для решения, где должно находиться состояние. Маркус указывает на сложность и накладные расходы как на причины отказа от сохранения состояния в Vuex.
Эта статья — попытка подробно рассказать о преимуществах и проблемах при использовании Vuex.
Преимущества:
- Государство централизовано и поэтому более предсказуемо
- Упрощает обмен данными между глубоко вложенными и несвязанными компонентами.
- Расширение возможностей отладки с помощью богатого инструмента разработки
Проблемы:
- Добавляет уровень косвенности для доступа к состоянию и, таким образом, увеличивает сложность кода.
- Утечки памяти, когда компоненты не удаляют состояние отключения должным образом
- Модульные тесты для компонентов становятся более сложными
Давайте рассмотрим эти проблемы с помощью простого приложения списка задач, которое отображает список текущих задач и позволяет добавлять новые задачи. Вот код компонента Todos.vue без хранилища Vuex.
Версия Vuex ниже показывает косвенность в состоянии доступа. Также обратите внимание, что теперь у нас есть дополнительная ответственность за правильное удаление состояния задач, чтобы предотвратить перегрузку памяти и нежелательные побочные эффекты, такие как отображение задач предыдущего пользователя при загрузке задач для другого пользователя.
Давайте посмотрим на модульное тестирование кода Todos.vue. Для имитации хранилища Vuex требуется довольно много кода и обработка некоторых ошибок (например, действий).
Посмотрите, как этот код упрощается, когда мы не используем Vuex.
С большой властью приходит большая ответственность. Тщательно подумайте о возможных последствиях вашего решения как в краткосрочной, так и в долгосрочной перспективе.
Да прибудет с тобой сила!
Использованная литература: