javascript - 我的 Vue.js Vuex 商店有 2 个发出 GET 请求的操作。第二个 Action 需要第一个 Action 的响应才能工作。怎么做？

Question

我有 2 个发出 GET 请求并将响应保存在 Vuex 存储中的操作。第一个操作 getVersion() 获取游戏的最新版本，并且需要该版本才能发出第二个 GET 请求。现在我已经在第二个操作中对版本进行了硬编码，但是，我的目标是将它连接到 URL 中。

遗憾的是，我不确定如何从函数内部访问它。 Console.log(state.version) 出于某种原因返回 null，即使它不应该。我从 App.vue 中这样调用这些函数:

mounted(){
    this.$store.dispatch('getVersion')
    this.$store.dispatch('getChampions')
}

Vuex 商店

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        version: null,
        champions: null
    },
    mutations: {
        version(state, data){
            state.version = data.version
        },
        champions(state, data){
            state.champions = data.champions
        }
    },
    actions: {
        getVersion({commit}){
            axios.get("http://ddragon.leagueoflegends.com/api/versions.json")
            .then((response) => {
                commit('version', {
                    version: response.data[0]
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        },
        getChampions({commit, state}){
            axios.get("https://ddragon.leagueoflegends.com/cdn/9.24.1/data/en_US/champion.json")
            .then((response) => {
                commit('champions', {
                    champions: response.data.data
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    },
    getters: {
        version: (state) => {
            return state.version;
        },
        findChampion: (state) => (id) => {
            let championId = id.toString();
            let champion = Object.values(state.champions).find(value => value.key === championId);

            return champion
        }
    }
})

Answer 1

这部分:

this.$store.dispatch('getVersion')
this.$store.dispatch('getChampions')

第二次发送不会等待第一次发送完成。这意味着它会在第一个有机会完成获取版本之前触发。

您需要创建一个应在调用第二个 dispatch 之前解决的 promise 。

你可以尝试这样做:

async mounted(){
    await this.$store.dispatch('getVersion')
    await this.$store.dispatch('getChampions')
}

或者如果你不想使用async/await

this.$store.dispatch('getVersion').then(() => { 
    this.$store.dispatch('getChampions');
});

并且在操作中，您应该将 return 添加到请求中(这很重要):

return axios.get(...