Как написать асинхронный код внутри объекта действия vuex?

Question

У меня есть Rest api для моего приложения vue.js, и я хочу знать, есть ли другой способ написания асинхронного кода с использованием vuex?

Мой код выглядит следующим образом

//store.js

const actions = {
    async GET_CLAN_MEMBERS({commit},id){
        let token = users.getters.getToken;
        return await axios.post(config.api + 'clans/' + id,{token})
    }
};

//Component.vue

created (){       
   this.$store.dispatch('GET_CLAN_MEMBERS',this.$route.params.id).then((res) => 
   {
      this.members = res.data;
   })
},

Сейчас он работает, но я не знаю, является ли это лучшим местом или практикой, напишите его в файле store.js.
Заранее спасибо,

Answer 1

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

Именно поэтому vuex поддерживает модулей , чтобы избежать слишком больших файлов хранилища.

Я провел несколько экспериментов здесь (пропущена модульность, но работает как хороший пример), и сама официальная документация говорит о вызове асинхронных операций внутри действий.Итак, аксиос / отдых внутри действий - рекомендуемый способ.

Answer 2

стандартная практика: действия всегда используются в качестве установщика, поэтому после ответа обратного вызова API вы должны вызвать мутацию, чтобы изменить состояние на основе данных ответа, а геттеры используются в качестве получателя (получение данных состояния)

Так что вы должны следоватьдиаграмма ниже для стандартной практики:

Для получения дополнительной информации читайте здесь