Для чего нужен vuex

Приступая к работе с Vuex: руководство для начинающих

Vuex является официальным решением для управления состоянием Vue. Этот шаблон проектирования использует централизованное хранилище, предоставляя компонентам методы для доступа к данным состояния.

В этой статье я приведу общий обзор Vuex и продемонстрирую, как использовать его в простом приложении.

Пример корзины покупок

Теперь представим, что вам нужно разработать API, который позволяет сторонним сайтам продавать товары напрямую со склада. Этот API должен обеспечивать синхронизацию остатков товара, отображаемых на основном сайте интернет-магазина. Вот где библиотека шаблонов управления состоянием избавит вас от проблем. Она поможет организовать код, который обрабатывает входные данные так, чтобы упростить добавление новых условий.

Что нужно?

Создание счетчика, используя локальное состояние

Мы создадим простой счетчик, который локально отслеживает состояние. Для этого сгенерируем новый проект, используя CLI:

Затем откройте файл : src/App.vue и замените существующий код следующим:

Базовые стили можно оставить без изменений.

Создание счетчика

Начнем с инициализации счетчика и его вывода на странице. Мы также сообщим пользователю, является ли сейчас значение счетчика четным или нечетным.

Откройте файл src/components/Counter.vue и замените его код на следующий:

Запустите приложение из корневой папки с помощью команды npm run serve и перейдите по адресу http://localhost: 8080. Попробуйте изменить значение счетчика, чтобы убедиться, что для counter и parity отображается правильный вывод.

Увеличение и уменьшение

Сразу после свойства computed в разделе

Вспомогательная функция mapState

Также функции mapState можно передать массив строк:

Обратите внимание, что mapState возвращает объект. Если нужно использовать функцию с другими вычисляемыми свойствами, то можете применить оператор распространения :

Геттеры

В хранилище Vuex геттеры эквивалентны вычисляемым свойствам Vue. Они позволяют создавать производные состояния, которые могут быть разделены между различными компонентами. Пример:

Вспомогательная функция mapGetters

Вы можете упростить код геттеров с помощью вспомогательной функции mapGetters :

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

Изменение состояния с помощью мутаций

Вы не можете вызвать обработчик мутаций напрямую. Вместо этого вы запускаете его, «совершая мутацию»:

Вы также можете передать в мутацию параметры:

В приведенном выше примере мы передаем мутации целое число, на которое она должна увеличить счетчик. Но так же можно передать объект в качестве параметра. Так вы можете легко включить несколько полей, не перегружая обработчик мутаций:

Вы также можете выполнить изменение состояния в стиле объекта :

Обработчик мутаций останется прежним.

Вспомогательная функция mapMutations

Чтобы уменьшить объем кода для обработчиков мутаций, можно использовать вспомогательную функцию mapMutations :

Действия

Действия — это функции, которые не меняют состояние. Они совершают мутации после выполнения некоторой логики (которая часто является асинхронной). Простой пример действия:

Обработчики действий получают объект context в качестве первого аргумента, который предоставляет доступ к свойствам и методам хранилища. Например:

Вы также можете использовать деструктуризацию аргументов для извлечения атрибутов хранилища. Например:

Действия могут быть асинхронными. Вот пример:

В этом примере мутация выполняется через 1000 миллисекунд. Обработчики действий вызываются не напрямую, а через специальный метод dispatch в хранилище:

Вы можете отправить действие в компонент следующим образом:

Вспомогательная функция mapActions

Также вы можете использовать вспомогательную функцию mapActions для назначения обработчиков действий локальным методам:

Реализация приложения счетчика с помощью Vuex

Чтобы модифицировать приложение счетчика с «локальным состоянием» в приложение Vuex, откройте файл src/store.js и обновите код следующим образом:

Здесь мы видим, как на практике структурируется хранилище Vuex.

Источник

Зачем нужен Vuex, если хранилище можно эмулировать с помощью data в рутовом экземпляре?

Одно дело, когда мы используем Redux для React’a, так как в последнем в руте у нас просто компонент, который свои состояния посылает в другие компоненты через props.
Зачем использовать Vuex, если у нас и так есть централизованное хранилище в виде data в рутовом экземпляре.
Мне кажется, что Эван Ю (создатель Vue) с самого начала реализовал архитектуру Vue таким образом, чтобы у нас было общее хранилище для всех компонентов приложения.
Что скажете по этому поводу?
Еще я не понимаю, что за шум вокруг мутабельности/иммутабельности, зачем все это? Если мне нужно изменить состояние, то я просто его меняю так:
this.$root.$data.users.push( <
name: this.name,
age: this.age
>)

Вот пример о том, что я говорю.
main.js:

А вот vue компонент, где мы работаем с users:

Простой 1 комментарий

Используйте глобальную дату, но помните одно, что её надо самому чистить из памяти. Ещё надо как-то придумать геттреы и сеттеры для неё. Вдруг понадобится из users достать определённых людей и это всё на разных страницах. Или например проверить авторизацию? На vuex сделать это проще, написав один геттер

Когда у вас возникнет проблемы с хранением и переполнением, то вы сами придёте к vuex.

Страница с контентом:

Vuex

Низачем он не нужен. По-моему, это просто мода.

Особенно смешно читать чел написал, что там есть МОДУЛЬНОСТЬ) Вау. а без Вуекса- то мы все как бедалаги пишем в одном огромном файле))) И еще один, что Вуекс крут, потому что там есть геттеры) Челик, геттеры есть в любом объекте, если ты не знал. В любом объекте data можешь написать обычный ЖС геттер, поместить его в Компутед как это делает Вуекс, и он будет реактивный, если ты не знал. Или что там может любой кусок кода сломать состояние. А на бэке разрабы пишут такой код и не парятся ни о чем. Как буд-то фронтеры в другом измерении живут и у них какие-то небывалые сложности.

Скорее всего Вуекс пошло от того, что Реакт оч. плохо изначально работает с мутабельными данными, для него необходим Стор. А во Вью это съобезъянничали, чтобы быть как большой брат. Мы специально на работе искали что сам Эван говорит про Вуекс, призывает ли он к нему. и нет таких интервью или статей. Только одну нашли где он отвечает на вопрос про Вуекс, и то он ответил что Вуекс не обязательно применять.

Источник

Vuex — глубокое погружение

Эта статья посвящена Vuex, библиотеке управления состоянием Vue.js. Мы рассмотрим проблемы, которые решает эта библиотека, основные концепции ее архитектуры, как ее настроить и использовать.

Vuex — это библиотека управления состоянием, созданная командой Vue для управления данными в приложениях Vue.js. Она обеспечивает централизованный способ управления данными, которые используются в приложении, и позволяет легко ими манипулировать.

Почему Vuex?

Vue способствует разделению представлений на компоненты. Эти компоненты могут многократно использоваться экземплярами Vue, которые принимают данные, методы и т. д. В данных хранится состояние представления, а методы позволяют манипулировать этим состоянием на основе взаимодействий пользователя с представлением.

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

Однако бывают случаи, когда нескольким компонентам необходимо совместно использовать состояние, или после изменения состояния в одном компоненте вам необходим родительский или дочерний компонент для выполнения последующего действия.

В зависимости от положения этого второго компонента, вы можете решить эту задачу использовав либо props, либо this.$parent для прямого доступа к данным или методам второго компонента. Но что, если вам нужно сделать это для большого количества компонентов?

По мере того как проект увеличивается в размерах, вы обнаруживаете, что передаете очень большое количество props и начинается в большом количестве непосредственно манипулировать DOM для доступа к различным компонентам.

Такой подход становится очень утомительным, а также затрудняет поддержку или отладку кода при возникновении ошибок. Для решения этой проблемы и предназначен Vuex. Он создает глобальную область (хранилище), в которую можно поместить все состояния, которые будут совместно использоваться различными компонентами.

Он также делает наш код более структурированным, облегчает отладку, поскольку мы можем использовать DevTools для отслеживания возникающих ошибок, и, конечно, обеспечивает реактивность, на которой и построен Vue. Вы можете представить аналогию с Vuex как о глобальным объекте window в JavaScript — к которому каждый компонент имеет доступ.

Инсталяция Vuex

Чтобы установить Vuex в проект, запустите код ниже.

Эта команда установит последнюю версию Vuex. Как только это будет сделано, нам нужно инициализировать Vuex в приложении Vue, создав наш файл store.js с кодом ниже;

Теперь мы можем приступить к созданию хранилища (store). Хранилище по сути является реактивным объектом, который содержит состояние приложения (state), геттеры (getters), мутации (mutations) и действия (actions).

Хранилище (Store)

Хранилище — это, по сути, централизованное состояние, в котором есть некоторые основные концепции, которые позволяют нам добиться этой централизации. Эти концепции:

State

Это один объект, который содержит все данные. Это похоже на ключевое слово data в структуре отдельных компонентов, за исключением того, что к этому состоянию можно получить доступ более чем из одного компонента, и, когда это состояние обновляется, все компоненты, обращающиеся к нему, также получают это изменение. Что бы его создать, нужно сделать следующее:

Чтобы получить доступ к состоянию Vuex в наших компонентах Vue, нам необходимо сначала импортировать хранилище в компонент, создав вычисляемое свойство, которое будет возвращать указанное состояние, а затем отобразить указанное состояние в представлении.

Теперь давайте импортируем хранилище. Есть два основных способа сделать это:

1. Импортируйте хранилище вручную в каждый компонент, для которого вы собираетесь использовать состояние Vuex, например:

2. Внедрение глобального хранилища Vuex в Vue Instance, которое автоматически дает нам доступ к хранилищу из всех компонентов Vue в приложении с использованием синтаксиса this.$store:

Getters

Геттеры (Getters) являются в значительной степени вычисляемыми свойствами для хранилища Vuex. Они позволяют нам генерировать новое состояние на основе текущего состояния — например, вычисляя, сколько товаров у нас в корзине.

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

Чтобы создать геттер, мы делаем следующее:

Далее мы получаем доступ к геттеру из нашего компонента Vue, выполнив следующие действия:

Теперь, когда товар добавляется в корзину, общее количество товаров в корзине обновляется автоматически.

Mutations

Мутации — единственный способ, которым мы можем обновить наше состояние Vuex. Они выполняют одну и только одну задачу: установить состояние. Это функция, которая принимает два аргумента, состояние (state) и полезную нагрузку (payload), где полезная нагрузка не обязательна.

Полезная нагрузка (payload) — это просто данные, которые будут использоваться для обновления состояния. Мутации синхронны, и поэтому мы не можем выполнять асинхронные задачи в них.

Теперь давайте добавим мутацию в наш код:

Далее нам нужно обновить состояние из нашего компонента Vue, и для этого нам нужно будет зафиксировать (commit) мутацию.

Теперь каждый раз, когда пользователь вводит значение в поле ввода и нажимает кнопку отправки, элемент добавляется в корзину, а общее количество элементов в корзине обновляется в представлении.

Actions

Действия (actions) похожи на мутации, но вместо того, чтобы мутировать состояние, они совершают (commit) мутации. Главное отличие действий от мутаций это то что действия асинхронны, то есть предназначены для выполнения асинхронных задач; когда эти задачи выполнены, нам нужно фиксировать (commit) мутацию, которая, в свою очередь, обновляет состояние.

Чтобы продемонстрировать действия, мы рассмотрим отправку элементов корзины в API.

Глядя на приведенный выше код, мы создали действие с именем checkout, которое принимает две вещи:

Внутри действия, мы сделали асинхронный вызов API, а затем передали requestObject в API. В случае успеха мы записали ответ, а затем приступили к очистке состояния корзины, но сначала нам нужно было создать мутацию emptyCart, единственная задача которой — очистить состояние корзины.

Теперь, когда мы рассмотрели, как создавать действия, мы рассмотрим запуск этого действия. Чтобы вызвать действие, Vuex предоставляет нам команду отправки (dispatch).

Давайте добавим действие в наш код и отправим его из представления:

На основе приведенного выше кода мы создали кнопку извлечения в представлении и создали метод извлечения, который проверяет, не пуста ли корзина, перед попыткой отправки действия, которое отправляет элементы.

Это работает, но чего-то не хватает. Вы можете спросить, что? Нам удалось отправить действие, но мы не знаем, было ли это действие успешным или нет.

Возможно вызов API не удался? Как я могу получить эту информацию, чтобы я мог уведомить пользователя? Действия могут обрабатывать Promises (Обещания), а также могут возвращать Promises.

Модифицируем наш пример кода для возврата Promise:

Теперь мы можем использовать возвращаемое значение, чтобы обновить пользователя о состоянии в представлении следующим образом:

Actions (Действия) также позволяют вам отправлять несколько actions (то есть action может отправлять одно или несколько других actions). Все, что вам нужно сделать, это передать dispatch в качестве аргумента, и вы сможете отправлять другие action внутри вашего action.

Добавление структуры в хранилище

Прямо сейчас у нас есть все наши состояния, геттеры, мутации и действия в одном файле store.js. В зависимости от того, насколько велика наша кодовая база проекта, этот файл может стать очень большим, и обычно всегда имеет смысл разделить его на отдельные файлы.

Теперь наше хранилище выглядит так:

Модули

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

Это работает путем группировки связанных состояний, геттеров, мутаций и действий в модуль. Это особенно полезно, когда у нас есть крупномасштабное приложение, а в хранилище много кода.

Реорганизовав наше хранилище в модуль, мы создадим файл cart.js и продолжим разбивать все наши состояния, мутации и действия в нашем хранилище, относящиеся к корзине, как показано ниже:

Далее мы импортируем и регистрируем его в нашем главном хранилище.

Наконец, наша структура кода будет выглядеть так:

Заключение

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

Источник

Почему VueX в Vue.js — идеальный интерфейс между Frontend и API

Дата публикации: 2018-06-27

От автора: сегодня речь пойдет о библиотеке Vue js VueX и о том, как с ее помощью можно решить некоторые проблемы взаимодействия Frontend и API. Увеличение сложности разработки веб-сайтов в конце концов привело к увеличению объема специализации и разделению front end и back end.

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

Задача: взаимодействие между Frontend и API

Интерфейс между интерфейсом и API стал общей точкой трения, задач и сложности. В идеальном мире backend и frontend будут развиваться вместе в гармонии, с тесной связью, а данные, обслуживаемые backend, будут соответствовать именно тем, что нужно frontend.

В действительности, часто две части приложения разрабатываются совершенно разными командами или даже разными компаниями. Совсем нередко есть специализированная команда в агентстве, создающая дизайн и интерфейс, в то время как ваша собственная команда разработчиков работает над backend.

Типичные решения

Результатом является поток, который обычно выглядит следующим образом:

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Создайте пользовательский интерфейс с использованием поддельных «заштрихованных» данных, либо непосредственно встроенных в шаблоны и код, либо загруженных через набор фикстур.

Когда API готов, скремблируйте, чтобы заменить каждую точку интеграции реальными вызовами API и данными.

Проблемы с этим подходом двоякие:

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

Даже если данные относительно изолированы, часто возникает несоответствие между ожидаемым интерфейсом и тем, что API в конечном итоге предоставляет.

Существует лучшее решение: VueX

Если вы разрабатываете свой внешний интерфейс с помощью Vue.js, лучшее решение этой проблемы прямо у вас под рукой.

Библиотека VueX, глубоко интегрированная в Vue, обеспечивает идеальное решение для создания чистого, изолированного интерфейса к вашим данным, что делает переход между заштрихованными данными и реальным API легким.

Что такое VueX

VueX — это библиотека управления состоянием, вдохновленная Flux, Redux и архитектурой Elm, но специально спроектированная и настроенная на то, чтобы хорошо интегрироваться с Vue.js и использовать преимущества Vue’s Reactivity.

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

Библиотеки, такие как VueX, позволяют управлять общим состоянием между компонентами способом, который структурирован и поддерживается, путем создания глобального дерева состояний, к которому можно получить доступ и обновить каждый компонент структурированным способом.

Как работает VueX

Состояние

Состояние представляет собой фактические данные. Это просто объект JavaScript, содержащий дерево данных. В VueX вы можете иметь одно глобальное дерево состояний или организовывать по модулю (например, дерево состояний пользователей, дерево состояний продукта и т. д.).

Например, мы можем использовать это дерево состояний для отслеживания нашего текущего пользователя, начиная с нуля, если пользователь не вошел в систему:

Мутации

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

Пример мутации может выглядеть так:

Мутации являются синхронными и непосредственно изменяют объект состояния (по сравнению с, например, Redux, где эквивалентная концепция называется редуктором и возвращает новый объект).

Это синхронное, прямое изменение состояния объекта идеально сочетается с концепцией реактивности Vue. Объекты состояния VueX являются реактивными, поэтому изменения пульсируют во всех зависимостях.

Вы вызываете мутацию через функцию commit:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Действия

Действия — это заключительная часть VueX, посредника между намерением и модификацией.

Действия являются асинхронными и косвенно изменяют хранилище посредством committing мутаций. Однако, поскольку они асинхронны, они могут делать гораздо больше.

Asynchronicity позволяет действиям обрабатывать такие вещи, как вызовы API, взаимодействие с пользователем и целые потоки действий.

В качестве простого примера действие может вызвать вызов API и записать результат:

Действия могут возвращать promises, позволяя представлениям или другому коду отправлять действия, чтобы дождаться их завершения и реагирования на основе их результатов. Вместо использования commit вы dispatch действие. Например, наш код вызова может выглядеть так:

Почему VueX-действия являются идеальным интерфейсом для API

Если вы работаете над проектом, в котором back end и front end одновременно развиваются, или вы работаете в команде UI / Frontend, которая может даже создавать пользовательский интерфейс до того, как back end существует, вы, вероятно, знакомы с проблемой, когда вам нужно заглушить части back end или данные по мере развития front end.

Общим способом, который это проявляется, является чисто статичные шаблоны или контент, с записями-заполнителями и текстом прямо в ваших интерфейсных шаблонах.

Шаг от этого — это некоторая форма фикстур, данные, которые статически загружаются интерфейсом и внедряются на место.

Оба они часто сталкиваются с одним и тем же набором проблем. Когда back end наконец-то доступен, есть куча рефакторинга, чтобы получить данные на месте.

Даже если (чудом) структура данных из back end соответствует вашим фикстурам, вам все равно придется скреститься, чтобы найти каждую точку интеграции. И если структура отличается (и давайте посмотрим правде в глаза, как правило, это так), вы не только должны это сделать, но вы должны выяснить, как вы можете либо изменить внешний интерфейс, либо создать слой абстракции, который преобразует данные.

Знакомство с действиями VueX

Красота VueX заключается в том, что действия обеспечивают идеальный способ изолировать и абстрагироваться между front end и back end, а также делать это таким образом, чтобы обновление от заштрихованных данных до реального back end было простым.

Позвольте мне немного расширить. Давайте рассмотрим наш пример авторизации. Если наш API входа еще не существует, но мы все еще готовы создать интерфейс, мы могли бы реализовать наши действия так:

Источник

Введение в Vuex: управление состоянием Vue.js

Если вы когда-нибудь всерьез занимались разработкой крупномасштабных одностраничных приложений, вы, вероятно, знакомы с таким понятием, как управление состоянием (в том числе с архитектурой Flux, популяризированной Facebook через Redux). В данном мануале мы покажем, как с помощью Vuex реализовать подобный шаблон в приложении Vue.

Установка Vuex

Vuex является официальным пакетом для Vue, но он не встроен по умолчанию. Вы должны сами решить, понадобится ли он вашему приложению, а затем установить его соответственно через менеджер yarn или npm.

Затем нужно включить плагин Vuex в начальной загрузке приложения.

import Vue from ‘vue’;

import Vuex from ‘vuex’;

import App from ‘App.vue’;

Установка Vuex завершена.

Создание хранилища данных

Чтобы воспользоваться преимуществами, которые предоставляет Vuex, нужно создать хранилище данных. Это, по сути, глобальный реактивный объект, который следует обычным шаблонам реактивности Vue. К нему нельзя получить прямой доступ или напрямую изменить его, чтобы обеспечить согласованное состояние и упростить отслеживание изменений. Чтобы создать хранилище, поместите в файл store.js такие строки:

export const store = new Vuex.Store(<

Чтобы получить доступ к хранилищу, нужно будет импортировать его во все компоненты приложения, либо внедрить его в корневой экземпляр Vue, чтобы он автоматически импортировался во все остальные компоненты как this.$store. Здесь мы будем использовать последний метод. Откройте main.js и поместите в него следующий фрагмент:

import Vue from ‘vue’;

import Vuex from ‘vuex’;

import App from ‘App.vue’;

import < store >from ‘./store.js’;

Доступ к состоянию

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

Использование геттеров

Геттер – это просто функция в хранилище, которая принимает объект состояния и возвращает его значение. В ваших компонентах доступ к данным можно получить через this.$store.getters.property (как через вычисляемое свойство, а не как через функцию). Если геттеру нужен параметр, он может вернуть вторую функцию, которая примет необходимый параметр.

export const store = new Vuex.Store(<

safelyStoredNumber: state => state.safelyStoredNumber,

return state.safelyStoredNumber === matchNumber;

// storedNumberMatches: state => matchNumber => state.safelyStoredNumbers === matchNumber

Однако существует более простой способ получить доступ к геттерам в компоненте – для этого нужно использовать вспомогательный метод Vuex под названием mapGetters. Это позволяет монтировать геттеры к вычисляемым свойствам верхнего уровня.

Метод mapGetters может принимать объект, если вы хотите переименовать геттеры в своем компоненте.

Изменение состояния

Синхронные мутации

Прямое изменение состояния в Vuex выполняется путем вызова функции, называемой мутацией. Мутация принимает текущее состояние и (опционально) полезную нагрузку. Полезной нагрузкой может быть любой объект. Мутации должны быть синхронными и не должны возвращать никаких значений. Их можно использовать напрямую в формате this.$store.commit(‘mutationName’, payload).

export const store = new Vuex.Store(<

Как и в случае с геттерами, Vuex предоставляет удобный метод для использования мутаций в компоненте, это вспомогательный метод mapMutations. Он позволяет монтировать мутации как методы.

Асинхронные действия

В более сложных приложениях вам, вероятно, нужно выполнять некоторые асинхронные действия для изменения состояния. Vuex выполняет этй задачу с помощью так называемых действий, или экшенов (action). Они также определены в объекте состояния и передают весь контекст, что позволяет им получать доступ к геттерам и фиксировать мутации. Обычно (но не всегда) они возвращают промис, указывающий на статус выполнения. Используя функции ES2017 async/await, вы можете писать очень короткие и простые асинхронные экшены. Они используются в компонентах напрямую в формате this.$store.dispatch(‘actionName’, payload).then(response => <>).

Чтобы изменить состояние внутри экшена, используйте context.commit(‘mutationName’, payload). Внутри экшена может находиться несколько мутаций.

import myRemoteService from ‘./my-remote-service.js’

export const store = new Vuex.Store(<

// регистрирует мутацию ‘setStoredNumber’ со значением, с которым myRemoteService.getRemoteValue() разрешается через промис.

context.commit(‘setStoredNumber’, await myRemoteService.getRemoteValue());

Если вы не знакомы с async/await, прочтите наше руководство Функции async/await в JavaScript. Если вкратце, они приостанавливают выполнение текущей функции до тех пор, пока не разрешится ожидаемый промис, что позволяет использовать промисы в качестве переменных.

Удобный метод Vuex для экшенов (который предсказуемо называется mapActions) используется так же, как и аналогичный метод для мутаций.

Модуляризация Vuex

Одного хранилища хватит, если вы работаете с небольшим набором данных. Но в работе неизбежно наступает момент, когда вам хочется разделить постоянно растущий список экшенов, мутаций и геттеров на отдельные разделы. К счастью, Vuex предоставляет для этого специальную систему – модули. Модуль – это обычный объект со свойствами состояния, геттеров, мутаций и экшенов. Вы можете легко создать его, выполнив следующее:

export const myModule = <

// делает ваши геттеры, мутации и экшены доступными, например: ‘myModule/myModularizedNumber’ используется вместо монтирования геттеров, мутаций и экшенов в корневом пространстве имен.

Источник