NUXT Как использовать Asynchronous Asynchronous данных Vuex-Store

внешний интерфейс JavaScript Vue.js Vuex
NUXT Как использовать Asynchronous Asynchronous данных Vuex-Store

Nuxt — это фреймворк общего назначения, основанный на Vue.js, который объединяет большинство компонентов/фреймворков, разработанных с помощью Vue.

Короче говоря, как получить асинхронные данные в Vuex-store?

В Nuxt за счет набора Vuex и некоторых других конфигураций нам очень удобно использовать Vuex; вОфициальная документация Nuxtнаписал:


Здесь автор использует метод модуля, чтобы использовать хранилище для удобства;

1.1 Сначала создайте новый файл .js в каталоге магазина.В связи с требованиями бизнеса создается несколько новых файлов .js модулей.


Далее давайте посмотрим, как создать новый метод модуля в файле js:

1.2 Инициализировать основные данные в методе состояния;


1.3 Обновление данных в методе мутации

В мутациях состояние принимается в качестве первого параметра, и другие параметры могут быть получены; (Советы:Важный принцип – помнитьмутация должна быть синхронной функцией.)

Вызвать метод в мутациях в компоненте для изменения данных дерева состояний


1.4 Как вызывать асинхронные данные в хранилище?

Так как в методе мутации может выполняться только метод синхронизации, то как получить данные на удаленном сервере в хранилище?

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


После определения метода в действиях нужно использовать store.dispatch в компоненте.вызывать; (Советы: обратите внимание на расположение файла)


Ps: это обсуждается здесь только для использования автором, другие методы вызова относятся кофициальная документация;

На этом два простых метода изменения данных в дереве состояний закончились, и автор продолжит добавлять методы в будущем.Если есть какая-либо ошибка, сообщите, пожалуйста;