Async/Await with Vuex dispatch
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.
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 promiseasync 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 wordOr you can return axios because axios also return a promise.