Vuex actions are asynchronous. So you are calling actions from your Vue component there should be a way to to know that the action you called , is completed successfully or not. So, the best way to do is, wrap your action around promises
I have the following code in my store.js file
actions: {
getProductTable(context, data) {
return new Promise((resolve, reject) => {
axios.defaults.headers.common['Authorization'] = 'Bearer '+ context.state.token
axios.get("api/products?page="+data.page).then(response => {
resolve(response);
}, error => {
reject(error);
})
})
},
}
In this example, I am calling getProductTable action in my ProductTable.vue file
this.$store.dispatch('getProductTable',{page:this.page})
.then(response=>{
this.products = response.data.data;
})