title: Vue.js with vuex and axios - can get data only on second load
body: <p>I created a Vue.js app with a central store with vuex and some basic API calls with axios to fetch data into the store.</p>
  <p>I create the following store action:</p>
  <pre><code>  loadConstituencyByAreaCodeAndParliament({commit}, {parliament_id, area_code}) {
      axios.get('/cc-api/area-code/' + parliament_id + '/' + area_code)
           .then((response) =&gt; {
             commit('SET_CONSTITUENCY', response.data);
           })
           .catch(function(error){
             commit('SET_CONSTITUENCY', null);
            }
           )
    }
  </code></pre>
  <p>In a single component file I defined a form where the user enters the area code. This form then calls this action to get the constituency fitting the area code:</p>
  <pre><code>export default {
    name: 'AreaCodeForm',
    components: {
      PostalCodeInput
    },
    props: ['parliament_id'],
    data: () =&gt; ({
      postalCode: ''
    }),
    methods: {
      search_area_code(submitEvent) {
        let area_code = submitEvent.target.elements.area_code.value;
        let payload = {
          parliament_id: this.parliament_id,
          area_code
        }
        this.$store.dispatch('loadConstituencyByAreaCodeAndParliament', payload).
            then(() =&gt; {
          let constituency = this.$store.getters.getConstituency();
          // do some things with the data received from the API
          // but everything depending on constituency does not work the first time.
          // Data received from the API is here available only from the second time on
          // wehen this code run.
        })
      }
    }
  }
  </code></pre>
  <p>As I found out the <code>$store.dispatch</code> method returns a promise but still the <code>constituency</code> variable receives not the data fetched with the <code>loadConstituencyByAreaCodeAndParliament</code> action but remains empty. I thought when I use the <code>promise.then</code> method the data should be already stored in the store but it is not. When I enter the area code a second time everything works well.</p>