VUEX

Vuex — централизованное хранилище состояний всех маршрутов и компонентов, используемых в веб-приложении. Каждый их них будет запрашивать данные у «State Management», а потом возвращать обратно измененные. Благодаря этому уменьшается количество ошибок и повышается защищенность системы.

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

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

Одно из достоинств Vue.js — виртуальный DOM, обновляющий только те компоненты интерфейса, состояние которых изменилось. Vuex по умолчанию поддерживает эту реактивность, автоматически вызывая изменения в DOM. Если хранить данные вне ее, то нужна отдельная функция для отслеживания изменений, а страница в любом случае будет перерисовываться полностью, что ухудшает скорость загрузки и не позволяет использовать важное преимущество фреймворка.