title: Vuex action not waiting to finish axios promise
body: <p>I encounter a strange situation developing an application in Laravel + VueJS/Vuex stack.</p>
  
  <p>I understand that if a promise is not returned the parent function calling it will not wait for it to resolve so things will go asynchronous. Axios returns a promise by default when calling a resourse through http.</p>
  
  <p>So i have the parent function which looks like this:</p>
  
  <pre><code>fetchInvoiceSeries() {
    var arr = []
    let invsrs = this.$store.getters['getInvoiceSeries']
    if (invsrs == null) {
      return this.$store
        .dispatch('get_invoice_series')
        .then(() =&gt; {
          invsrs = this.$store.getters['getInvoiceSeries']
          if (invsrs != null) {
            invsrs.forEach(function(s) {
              arr.push({
                value: s.id,
                text: s.series + ' / ' + s.increment
              })
            })
            this.series = arr
          } else {
            console.log('Error while fetching invoice series!')
          }
        })
        .catch(e =&gt; {
          console.log(e)
        })
    } else {
      invsrs.forEach(function(s) {
        arr.push({
          value: s.id,
          text: s.series + ' / ' + s.increment
        })
      })
      this.series = arr
    }
  }
  </code></pre>
  
  <p>And here is the function defined in action part of the vuex module:</p>
  
  <pre><code>get_invoice_series({ commit }) {
      return get('/api/series/0')
          .then(response =&gt; {
              if (response.data &amp;&amp; typeof response.data !== undefined) {
                  let payload = response.data
                  commit('SET_INVOICE_SERIES', payload)
              } else {
                  console.log('error', error)
              }
          })
          .catch(error =&gt; {
              console.log('error', error)
          })
  },
  </code></pre>
  
  <p>So as you can see i am returning the get request from axios inside the action. In the parent i am calling the action and the "then" keyword in order to do some processing after the action it's done. Also i am using arrow function because i need the context in the parent function in order to call this.$store ...</p>
  
  <p><strong>The problem</strong> is that even after checking the getter to see if the state have the invoice series and getting them using the get_invoice_series action i still don't have the invoice series in memory judging by the code i wrote. The console keeps loggin '<strong>Error while fetching invoice series!</strong>' <strong><em>the first time i execute the code and the second time (after the information exists in state), the code skips fetching the invoice series (as expected)</em></strong>.</p>
  
  <p>Can you tell me what i am doing wrong ? Thank you!</p>