Мне немного страшно признать, что я не совсем понимал, зачем использовать Vuex, примерно неделю назад, когда я посмотрел учебник по Vuex от Адама Джара в курсе Real World Vue 😮. В этой статье я хочу предоставить вам информацию, которую я хотел бы знать о Vuex и State.

🛑 Проблема

По мере роста вашего приложения Vue вы столкнетесь с двумя проблемами:

  1. Отправка данных по всему приложению. Когда вы впервые начинаете изучать Vue, вы обнаруживаете свойства и события как решение для отправки данных. Но как только у вас будет более 10 компонентов, вы, скорее всего, попадете в ситуацию, когда двум компонентам на противоположной стороне вашего приложения нужны одни и те же данные, и просто не имеет смысла отправлять множество всплывающих событий и отправка реквизита вниз. Вы можете использовать глобальную шину событий, но у этого шаблона есть свои ограничения.
  2. Манипуляции с данными во всем приложении. Много лет назад у Facebook была проблема. У них были гигантские приложения React с данными, которыми манипулировало множество различных компонентов. Когда множество различных частей вашего приложения манипулируют вашими данными разными способами (и у вас есть большое приложение, такое как Facebook), ваше приложение может стать хрупким. Вот почему Facebook создал Flux, архитектуру, на которой основан Vuex.

✅ Решение

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

Итак, это решает проблему №1. Нам больше не нужно отправлять данные по всему нашему приложению, потому что у него есть доступ к этому глобальному состоянию.

Чтобы решить проблему №2, Vuex вводит Мутации и Действия, которые по сути являются функциями с двумя разными обязанностями .

💥 Мутации - это очень простые функции, которые изменяют ваше состояние. Мутации - единственный способ изменить ваше состояние. Когда мы называем мутации, мы не говорим, что мы их «называем»; вместо этого мы говорим, что зафиксировали их.

📣 Действия - это более сложные функции, которые могут вызывать одну или несколько мутаций. Они часто выполняют дополнительную логику, такую ​​как вычисления, условную логику или вызовы API. Когда мы вызываем действия, мы говорим, что «отправляем» их.

Ниже вы можете увидеть, как мы отправляем действие 📣 fetchTodo, которое фиксирует мутацию «SET_LOADING_STATUS», которая изменяет состояние.

В приведенной выше анимации действие 📣 выполняет только одну фиксацию, но выполняет следующие действия:

Как видите, наше действие 📣 отвечает за выборку данных из API и вызов 💥 мутаций, которые изменяют состояние 🌏.

🌏 Доступ к государству

Самый простой способ получить доступ к состоянию Vuex из файла .vue показан ниже (слева), хотя вы также можете разместить их внутри вычисляемых свойств, чтобы упростить их запись в шаблоне (показан справа).

Vuex также имеет помощник под названием mapState, который упрощает сопоставление вашего состояния с вычисляемыми свойствами в ваших компонентах.

Помощник mapState можно еще больше упростить, что еще больше упростит включение нашего состояния там, где это необходимо.

Это делает очень удобным сопоставление вычисленных свойств с несколькими частями вашего состояния, такими как:

computed: mapState(['posts', 'user', 'comments', 'shopping_cart'])

Как видите, mapState занимает все наше вычисляемое свойство, поэтому вам может быть интересно, как добавить сюда дополнительные локальные вычисляемые свойства. Этого достаточно легко добиться, используя оператор распространения объекта.

computed: {
  localComputed() { 
    return something       
  },       
  ...mapState(['posts', 'user']) // <-- using object spread operator     
}

Как видите, мы используем синтаксис распространения ES6 JavaScript, чтобы добавить свойства, которые возвращаются из mapState как вычисляемые свойства.

⏭ Куда идти дальше?

Если вы хотите продолжить изучение Vuex, я настоятельно рекомендую подписаться на Vue Mastery, чтобы вы могли смотреть уроки Адама Яра по Введение в Vuex (здесь я получил потрясающую анимацию выше) и Vuex State + Getters . Чтобы получить 25% скидку на годовую подписку, используйте код VUEMASTERYBLOG25. Плюс 35 долларов вашей подписки пойдут непосредственно на поддержку самого проекта Vue.js.

В следующие несколько недель мы выпустим еще больше контента Vuex.