title: Vuex accessing state BEFORE async action is complete
body: <p>I'm having issues where a computed getter accesses the state before it is updated, thus rendering an old state. I've already tried a few things such as merging mutations with actions and changing state to many different values but the getter is still being called before the dispatch is finished.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>State is accessed before async action (api call) is complete.</p>
  
  <p><strong>Code structure</strong></p>
  
  <ol>
  <li>Component A loads API data.</li>
  <li>User clicks 1 of the data.</li>
  <li>Component A dispatches clicked data (object) to component B.</li>
  <li>Component B loads object received.</li>
  </ol>
  
  <p><strong>Note</strong></p>
  
  <p>The DOM renders fine. This is a CONSOLE ERROR. Vue is always watching for DOM changes and re-renders instantly. The console however picks up everything.</p>
  
  <p><strong>Goal</strong></p>
  
  <p>Prevent component B (which is only called AFTER component) from running its computed getter method before dispatch of component A is complete.</p>
  
  <p><strong>Store.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import axios from 'axios';
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
  
    state: {
      searchResult: {},
      selected: null,
    },
  
    getters: {
      searchResult: state =&gt; {
        return state.searchResult;
      },
      selected: state =&gt; {
        return state.selected;
      },
    },
  
    mutations:{
      search: (state, payload) =&gt; {
        state.searchResult = payload;
      },
      selected: (state, payload) =&gt; {
        state.selected = payload;
      },
    },
  
    actions: {
      search: ({commit}) =&gt; {
        axios.get('http://api.tvmaze.com/search/shows?q=batman')
          .then(response =&gt; {
            commit('search', response.data);
          }, error =&gt; {
            console.log(error);
          });
      },
  
      selected: ({commit}, payload) =&gt; {
        commit('selected', payload);
      },
    },
  
  });
  </code></pre>
  
  <p><strong>SearchResult.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    //looped
    &lt;router-link to="ShowDetails" @click.native="selected(Object)"&gt; 
        &lt;p&gt;{{Object}}&lt;/p&gt;
    &lt;/router-link&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    methods: {
      selected(show){
        this.$store.dispatch('selected', show);
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>ShowDetails.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{Object.name}}&lt;/p&gt;
    &lt;p&gt;{{Object.genres}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    computed:{
      show(){
        return this.$store.getters.selected;
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/njf5A.png" rel="noreferrer">This image shows that the computed method "show" in file 'ShowDetails' runs before the state is updated (which happens BEFORE the "show" computed method. Then, once it is updated, you can see the 2nd console "TEST" which is now actually populated with an object, a few ms after the first console "TEST". </a></p>
  
  <p><strong>Question</strong> </p>
  
  <p>Vuex is all about state watching and management so how can I prevent this console error?</p>
  
  <p>Thanks in advance.</p>