Can I do dispatch from getters in Vuex
Solution 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
Solution 2
I know this is an older post and I'm not sure if this is good practice, but I did the following to dispatch from a getter in my store module:
import store from "../index"
And used the store inside my getter like this:
store.dispatch("moduleName/actionName")
I did this to make sure data was made available if it was not already present.
*edit: I want you to be aware of this: Vue form - getters and side effects
This is related to @storsoc note.
If you need to dispatch from your getter you probably are already implementing your state wrong. Maybe a component higher up should already have fetched the data before (state lifting). Also please be aware that getters should only be used when you need to derive other data from the current state before serving it to your template otherwise you could call state directly: this.$store.state.variable
to use in methods/computed properties.
Also thing about your lifecycle methods.. you could for example in your mounted or created methods check if state is set and otherwise dispatch from there. If your getter / "direct state" is inside a computed property it should be able to detect changes.
Solution 3
had the same Problem.. also wanted all Vue-Instances to automaticly load something, and wrote a mixin:
store.registerModule('session', {
namespaced: true,
state: {
session: {hasPermission:{}},
sessionLoaded:false
},
mutations: {
changeSession: function (state, value)
{
state.session = value;
},
changeSessionLoaded: function (state)
{
state.sessionLoaded = true;
}
},
actions: {
loadSession(context)
{
// your Ajax-request, that will set context.state.session=something
}
}
});
Vue.mixin({
computed: {
$session: function () { return this.$store.state.session.session; },
},
mounted:function()
{
if(this.$parent==undefined && !this.$store.state.session.sessionLoaded)
{
this.$store.dispatch("session/loadSession");
this.$store.commit("changeSessionLoaded");
}
},
});
because it loads only one per vue-instance and store and it it inlcuded automaticly in every vue-instance, there is no need to define it in every main-app
Saurabh
Writing little good, some bad and mostly ugly code for last 5 years in C, Ruby, Angular, Node, Vue.js, java, scala and recently exploring Big data tools like apache-storm, apache-spark, akka, etc. Trying to help people whenever possible and making this earth more liveable place one bit at a time.
Updated on December 24, 2021Comments
-
Saurabh over 2 years
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.