Большинство людей не согласились бы с тем, как я определяю Vuex, но когда я впервые столкнулся с термином «State Manager», парень, который объяснил мне его, и я не буду называть имен (Oz), потребовалось 20 минут, чтобы объяснить, что могло быть было объяснено в пяти словах - Глобальные переменные с дополнительными шагами.
Вот официальное определение согласно Vuex: «Vuex - это шаблон управления состоянием + библиотека для приложений Vue.js». Так что же такое модель управления состоянием? Чем он отличается от глобальных переменных? И как нам это использовать?
Паттерн государственного управления
Допустим, вы работаете над веб-приложением, состоящим из множества компонентов с однонаправленным потоком данных (от родительского к дочернему).
Теперь предположим, что вы хотите вернуть данные. Один из вариантов - функция emit, встроенная в Vue.js. Это будет означать отправку данных всем компонентам, и тот, кто в них нуждается, поймает их с помощью слушателя. (Это открывает ваше приложение для проблем, таких как несвоевременная инициализация слушателя, что приводит к «потере» данных между двумя компонентами, которые должны были быть похожими). С базовыми веб-приложениями больше ничего не требуется, но с более сложными веб-приложениями производительность может пострадать. Вот тут-то и появляется Vuex, как еще один слой поверх других компонентов:
Все компоненты имеют к нему доступ, обеспечивая единый источник истины для всего приложения.
* Тот факт, что у вас есть место для хранения всех ваших данных, не означает, что все данные должны храниться там *
Хранение и глобальные переменные
Между хранилищем vuex и глобальными переменными есть много различий, я объясню два, которые, на мой взгляд, наиболее значительны.
Одно существенное отличие состоит в том, что у вас есть объект «Единственный источник истины» с именем state, и все ваши данные хранятся в этом объекте.
Другое отличие состоит в том, что вы не должны напрямую изменять данные, как обычно, с глобальными переменными. В следующем примере показано, что вам нельзя делать:
Это снижает вероятность того, что какой-либо сторонний модуль или компонент изменит ваши данные.
Чтобы правильно изменить данные, вам необходимо использовать мутации, которые являются функциями, которым разрешено изменять ваше состояние. В следующем примере вы должны изменить свои данные:
Если вы хотите манипулировать данными или использовать асинхронную функцию, вам необходимо использовать следующие функции actions:
А поскольку мутации всегда синхронны, отладить поток данных состояния легко.
Добавление Vuex в ваш проект
Все, что вам нужно сделать, чтобы добавить Vuex в свой проект:
֫ npm install --save vuex
Затем импортируйте Vuex (я установил и импортировал Axios, только в демонстрационных целях, нет необходимости использовать Axios).
Создание нового экземпляра магазина Vuex
Мы начнем с создания нового экземпляра хранилища Vuex, затем добавим ключ под названием «score», установим значение по умолчанию для оценки на 0 и добавим мутацию, чтобы иметь возможность изменять значение в любое время. Теперь, допустим, мы хотим получить оценку от некоторого API, нам нужно будет создать действие как асинхронную функцию, а затем зафиксировать данные.
Создание приложения Vue
Затем мы создадим новый компонент Vue под названием «ScoreDashboard», который будет отображать оценку из магазина, а после установки изменим значение на 10.
Наконец, мы создадим приложение Vue, добавив ScoreDashboard в качестве компонента.
Другой способ доступа к магазину - mapGetters, mapActions.
Мне было проще использовать mapGetters и mapActions в моих проектах как еще один способ доступа к магазину. Фактической разницы между подходами, кроме синтаксиса, нет. Ниже приведен тот же код, только с использованием mapGetters и mapActions.
Их можно использовать, развернув разделы computed и methods вашего компонента с помощью оператора распространения (…).
Итак, дети, что мы узнали здесь сегодня? Мы узнали значение шаблона управления состоянием, основные различия между глобальными переменными и хранилищем Vuex и то, как добавить новое хранилище в ваш проект Vue. Я надеюсь, что это было полезно и актуально для вас и вашей команды.