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.