My Vue.js Vuex 스토어에는 GET 요청을 하는 두 가지 작업이 있습니다.두 번째 액션이 작동하려면 첫 번째 액션의 응답이 필요합니다.어떻게 하는 거야?

My Vue.js Vuex 스토어에는 GET 요청을 하는 두 가지 작업이 있습니다.두 번째 액션이 작동하려면 첫 번째 액션의 응답이 필요합니다.어떻게 하는 거야?

GET 요청을 하고 응답을 Vuex 저장소에 저장하는 작업은 두 가지가 있습니다.첫 번째 액션getVersion()는 게임의 최신 버전을 가져오며 두 번째 GET 요청을 작성하려면 해당 버전이 필요합니다.현재 두 번째 액션에서는 버전을 하드코딩하고 있습니다만, 제 목표는 URL 내에 연결하는 것입니다.

유감스럽게도 기능 내부에서 접속하는 방법을 잘 모르겠습니다.Console.log(상태).version)은 어떤 이유로 null을 반환하지 않아야 하는데 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
        }
    }
})

이 부분과 함께:

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

두 번째 디스패치는 첫 번째 디스패치가 완료될 때까지 기다리지 않습니다.첫 번째 사람이 버전 취득을 완료하기 전에 발사되고 있다는 의미입니다.

두 번째가 되기 전에 해결해야 할 약속을 만들어야 합니다.dispatch호출됩니다.

다음과 같이 시도해 볼 수 있습니다.

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(...

디스패처가 약속을 반환하다

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

언급URL : https://stackoverflow.com/questions/59490341/my-vue-js-vuex-store-has-2-actions-that-make-get-requests-the-second-action-req