Check if the dispatch vuex is done - vue.js

Question

Hi I have this create and update zone function. After the API call success. I will callback again the dispatch on vuex store. Then Go back to main zone page.
The problem is it will took around 5 secs to get the list the results of dispatch. Making my list not updated.
How to know if the dispatch is done before going back to the page?
loadZones(){
this.$store.dispatch('getZones');
},
createOrUpdateZone(zone, region_checkbox, callback){
this.$http.post(process.env.API_URL +'/api/.....)
.then(res=> {
if(res.data.success == true){
this.loadZones();
this.$router.push('/zone');
} else{
this.has_error = true;
})
}

Answer 1

Vuex actions always return Promise, just add return when you create request in your getZones action to chain your ajax request promise with returned by action, then you can do something like this:
//... in actions, example
getZones(context) {
return some_http_request()
}
//...
loadZones(){
return this.$store.dispatch('getZones');
},
createOrUpdateZone(zone, region_checkbox, callback){
this.$http.post(process.env.API_URL +'/api/.....)
.then(res=> {
if(res.data.success == true){
// next "then" will be invoked when this request will be done
return this.loadZones();
}
else throw new Error();
})
.then(() => {
this.$router.push('/zone');
})
.catch(() => this.has_error = true);
}

Answer 2

You can use async await.
When you make loadZones async function, in it you can use await on the dispatch getZones. But remember that the getZones action should return a promise. I believe that it already returning a promise, so you just have to add async await.
async loadZones(){
await this.$store.dispatch('getZones');
},
createOrUpdateZone(zone, region_checkbox, callback){
this.$http.post(process.env.API_URL +'/api/.....)
.then(res=> {
if(res.data.success == true){
this.loadZones();
this.$router.push('/zone');
} else{
this.has_error = true;
})
}