async/Vuex에서 작업 대기 중

Question

Vuex에서 async/await 작업을 사용하는 방법이 궁금합니다. (가) docs 예를 들어이 구문을 제공 : 예 다음

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>

console.log 문이 숫자 순서대로 인쇄 될 것으로 예상합니다. 누군가 내가 잘못하고있는 것을 분명히 할 수 있다면 고맙겠습니다.

Answer 1

getResource() 메서드에서 Vue.http.get() 약속을 지정하지 않으므로 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 
}