async/await actions in Vuex

Question

I am wondering how to use async/await actions in Vuex. The docs provide this syntax as an example:

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

Following this example, I have:

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;         }     } }); 

However, even following the syntax example found in the docs, when I run this code, the async/await seem to be completely ignored. When I look at the logs, I see, in the following order:

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

I expect the console.log statements to print out in numerical order. I would appreciate if someone could clarify what I am doing wrong.

Answer 1

You're not awaiting the Vue.http.get() promise in the getResource() method, so await dispatch('getResource') will resolve before the HTTP request has resolved.

Trimmed down:

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 }