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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 2 3 4 5 |
this.$store.dispatch('getProductTable',{page:this.page}) .then(response=>{ this.products = response.data.data; }) |