Can I do dispatch from getters in Vuex

Question

Fiddle : here

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.

Following is my Vuex store:

const state = {
  pets: []
};

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

const actions = {
 FETCH_PETS: (state) => {
      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
});

But I am getting following error:

Uncaught TypeError: state.dispatch is not a function(…)

I know I can do this, from beforeMount 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.

Answer 1

Getters can not call dispatch as they are passed the state not context of the store

Actions can call state, dispatch, commit as they are passed the context.

Getters are used to manage a 'derived state'.

If you instead set up the pets state on the components that require it then you would just call FETCH_PETS from the root of your app and remove the need for the getter