Большинство людей не согласились бы с тем, как я определяю 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. Я надеюсь, что это было полезно и актуально для вас и вашей команды.