Menu
I need to call vuex module it doesn't work. I've seen the documentation but still it doesn't work. Hope someone can help me.
const stateLocations ={
state: {
provinces: {},
cities: {}
},
mutations: {
provinces(state, payload){
state.provinces = payload
}
}
}
const store = new Vuex.Store({
modules: {
locations: stateLocations
}
})
My code to call the mutations
created(){
var store = this.$store
axios.get('api/provinces')
.then( function(response){
store.state.locations.commit('provinces', response.data)
})
.catch()
}
This one doesn't work store.state.locations.commit('provinces', response.data)
TY
921
In Vuex, mutations are synchronous transactions: store. commit('increment') // any state change that the "increment" mutation may cause // should be done at this moment. To handle asynchronous operations, let's introduce Actions.
To change another module state from one module in Vuex, we can call commit with the mutation name with the root option set to true . commit("TOGGLE_LOADING", null, { root: true }); to call commit to commit the TOGGLE_LOADING mutation with root set to true .
Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations.
Mutations are intended to receive input only via their payload and to not produce side effects elsewhere. While actions get a full context to work with, mutations only have the state and the payload .
Because you didn't enable namespaced in the module, you simply need to
this.$store.commit('provinces', response.data)
If you want to enable namespace:
const stateLocations = {
namespaced: true,
state: {
...
then you commit the mutation like this:
this.$store.commit('locations/provinces', response.data)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
