Async/Await with Vuex dispatch
You can not await a function without promise
await this.$store.dispatch('product/getProducts', 'bestseller');
This function return data or call new action
getProducts({commit}, type) {
axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},
And this function return promise because of async function
async function return promise
async getProducts({commit}, type) {
let res = await axios.get(`/api/products/${type}`);
commit('SET_PRODUCTS', {products: res.data, type});
}
Now using above function now you can use
await this.$store.dispatch('product/getProducts', 'bestseller');
with await key word Or you can return axios because axios also return a promise.
Change this:
getProducts({commit}, type) {
axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},
To this:
getProducts({commit}, type) {
return axios.get(`/api/products/${type}`)
.then(res => {
let products = res.data;
commit('SET_PRODUCTS', {products, type})
}).catch(err => {
console.log(err);
})
},
Should work.
axios.get
returns a promise. You would need to return that promise in order to let await
wait for it. Otherwise, you are implicitly returning undefined
and await undefined
would immediately resolve.