title: async/await actions in Vuex
body: <p>I am wondering how to use async/await actions in Vuex. The <a href="https://vuex.vuejs.org/en/actions.html" rel="noreferrer">docs</a> provide this syntax as an example:</p>
  
  <pre class="lang-es6 prettyprint-override"><code>actions: {
    async actionA ({ commit }) {
      commit('gotData', await getData())
    },
    async actionB ({ dispatch, commit }) {
      await dispatch('actionA') // wait for `actionA` to finish
      commit('gotOtherData', await getOtherData())
    }
  }
  </code></pre>
  
  <p>Following this example, I have:</p>
  
  <pre class="lang-es6 prettyprint-override"><code>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) =&gt; {
                      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) =&gt; {
                      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) =&gt; {
                      console.log("got something from somesite")
                      var data = response.body;
                      // do something with data -&gt; payload
                      dispatch('saveValues', payload);
                  }, (error) =&gt; {
                      console.log(error);
                  });
          }
      },
      getters: {
          resource(state) {
              return state.resource;
          }
      }
  });
  </code></pre>
  
  <p>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:</p>
  
  <ul>
  <li><code>getting api</code></li>
  <li><code>resource1: undefined</code></li>
  <li><code>resource4: null</code></li>
  <li><code>get resource</code></li>
  <li><code>resource2: &lt;expected-value&gt;</code></li>
  <li><code>resource3: &lt;expected-value&gt;</code></li>
  </ul>
  
  <p>I expect the console.log statements to print out in numerical order. I would appreciate if someone could clarify what I am doing wrong.</p>