Can I do dispatch from getters in Vuex
<p>Fiddle : <a href="https://jsfiddle.net/9a6Lg2vd/6/" rel="noreferrer">here</a></p>

<p>I am creating a webapp with Vue 2 with Vuex. I have a store, where I want to fetch state data from a getter, What I want is if getter finds out data is not yet populated, it calls dispatch and fetches the data.</p>

<p>Following is my Vuex store:</p>

<pre><code>const state = {
  pets: []
};

const mutations = {
  SET_PETS (state, response) {
    state.pets = response;
  }
};

const actions = {
 FETCH_PETS: (state) =&gt; {
      setTimeout(function() { 
            state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
    }, 1000)
 }
}

const getters = {
    pets(state){
    if(!state.pets.length){
        state.dispatch("FETCH_PETS")
    }
    return state.pets
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});
</code></pre>

<p>But I am getting following error:</p>

<blockquote>
  <p>Uncaught TypeError: state.dispatch is not a function(…)</p>
</blockquote>

<p>I know I can do this, from <code>beforeMount</code> of Vue component, but I have multiple components which uses same Vuex store, so I have to do it in one of the components, which one should that be and how will it impact other components.</p>