Мне немного страшно признать, что я не совсем понимал, зачем использовать Vuex, примерно неделю назад, когда я посмотрел учебник по Vuex от Адама Джара в курсе Real World Vue 😮. В этой статье я хочу предоставить вам информацию, которую я хотел бы знать о Vuex и State.
🛑 Проблема
По мере роста вашего приложения Vue вы столкнетесь с двумя проблемами:
- Отправка данных по всему приложению. Когда вы впервые начинаете изучать Vue, вы обнаруживаете свойства и события как решение для отправки данных. Но как только у вас будет более 10 компонентов, вы, скорее всего, попадете в ситуацию, когда двум компонентам на противоположной стороне вашего приложения нужны одни и те же данные, и просто не имеет смысла отправлять множество всплывающих событий и отправка реквизита вниз. Вы можете использовать глобальную шину событий, но у этого шаблона есть свои ограничения.
- Манипуляции с данными во всем приложении. Много лет назад у 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.