Vuex의 비동기/대기 동작

Vuex의 비동기/대기 동작

Vuex에서 비동기/대기 동작을 어떻게 사용하는지 궁금하다.문서에서는 다음과 같은 구문을 예로 제시한다.

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // wait for `actionA` to finish
    commit('gotOtherData', await getOtherData())
  }
}

이 예에 따라 다음 사항을 설명하십시오.

import Vue from 'vue';
import Vuex from 'vuex';
import * as firebase from 'firebase';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        // other state vars here
        resource: null
    },
    mutations: {
        // saveValues
        setResource(state, payload) {
            state.resource = payload;
        }
    },
    actions: {
        async getResource({ commit, dispatch }) {
            var resource
            console.log('resource1: ' + resource)
            Vue.http.get('https://mysite/api/getResource')
                .then((response) => {
                    console.log('get resource')
                    var data = response.body;
                    resource = data.access_resource;
                    console.log('resource2: '+ resource)
                    commit('setResource', resource);
                    var foo = store.getters.resource;
                    console.log('resource3: ' + foo);
                }, (error) => {
                    console.log(error);
                });
        },
        async getSomeApi({ commit, dispatch }) {
            console.log('getting api');
            await dispatch('getResource');
            var resource = store.getters.resource;
            console.log('resource4: ' + resource);
            Vue.http.get('https://somesite/api/someapi?resource=' + resource)
                .then((response) => {
                    console.log("got something from somesite")
                    var data = response.body;
                    // do something with data -> payload
                    dispatch('saveValues', payload);
                }, (error) => {
                    console.log(error);
                });
        }
    },
    getters: {
        resource(state) {
            return state.resource;
        }
    }
});

그러나 문서에 있는 구문 예를 따르더라도 이 코드를 실행하면 비동기/와이트가 완전히 무시되는 것 같다.로그를 보면 다음과 같은 순서로 알 수 있다.

• getting api
• resource1: undefined
• resource4: null
• get resource
• resource2: <expected-value>
• resource3: <expected-value>

콘솔.log 문장이 숫자 순서대로 출력될 것으로 예상한다.내가 무엇을 잘못하고 있는지 누군가 분명히 해 주면 고맙겠다.

아니잖아.await에 관하여Vue.http.get()을 약속하다getResource()방법, 그러니까await dispatch('getResource')HTTP 요청이 확인되기 전에 해결됨.

아래로 잘라내기:

async getResource() {
    let response

    try {
        response = await Vue.http.get('https://mysite/api/getResource')
    } catch (ex) {
        // Handle error
        return
    }

    // Handle success
    const data = response.body
}

참조URL: https://stackoverflow.com/questions/47916630/async-await-actions-in-vuex