Vuex

14 Февраля 2022 23:47

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

Это официальное определение vuex из документации. Возможно, для фронтендера оно прозвучит просто и понятно, но для меня как для бэкендера это прозвучало неоднозначно. На словах "Хранилище данных" я сразу представил базу данных или типа как бы слой для работы с данными из базы (из api) или типа как аналог localStorage. От этого понять vuex было не легче.

Но, всё таки, более понятно - vuex это что-то типа отдельного слоя, с помощью которого мы управляем переменными, которые содержат в себе какие-либо данные, ну и, как я предположил ранее, для работы с данными, которые получаем с бэка. Т.е. какие бы не обрабатывались данные в приложении vue, они все должны работать через vuex , будь то счетчик counter, статьи и т.д.

Можно сказать "а ведь можно передавать данные во vue через v-bind в дочерние компоненты или использовать provide и Inject". Да, но в более-менее крупных проектах это создаст невыносимую путаницу и усложнит понимание проекта. Нужно будет передавать огромное количество данных по компонентам и обратно. Vuex же решает эту проблему и предоставляет централизованное место, где мы можем объявлять переменные, наполнять их данными, изменять и выводить в любом компоненте через this.$store.

Самое очевидное преимущество vuex демонстрирует на примере уведомлений: допустим, у нас в приложении есть система уведомлений и нам нужно вывести количество непрочитанных уведомлений в двух, а то и в трёх местах. Это будут разные компоненты разной вложенности. Очевидно, что с vuex вопрос решается легко через тот же this.$store, в то время как, без vuex мы будем передавать эти данные через provide-inject'ы по компонентам, что гораздо менее удобно.

Вывод: для небольших приложений можно обойтись без vuex. Если в приложении есть хотя бы небольшой намёк на масштабриуемость - лучше установить vuex.

Схема работы Vuex

State

Аналог data() в компонентах - хранит данные приложения. Это и есть то самое состояние приложения (стейт).

Mutations

Методы, которые вносят изменения непосредственно в state.

Из компонентов следует вносить изменения используя метод commit, передавая параметром название мутации. Пример:

methods: {
  increment() {
    this.$store.commit('add')
  }
}

Примечание. Мутации всегда синхронные. Если нужно сделать метод асинхронным, следует его реализовать через Actions.

Actions

Getters 

Modules