Async/Await with Vuex dispatch

Question

I am making a loader for some components in my app.

Here is my component:

        mounted() {
            this.loading = true;

            this.getProduct();
        },
        methods: {
            async getProduct() {
                await this.$store.dispatch('product/getProducts', 'bestseller');

                console.log(123);

                this.loading = false;
            }
        },

Vuex 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);
        })
    },

The problem is in this line: await this.$store.dispatch('product/getProducts', 'bestseller');

I expect the code will stop at that line and wait for data is loaded from AJAX call and then set the loading is false;

But it isn't. The loading is still set false and the console.log run before my data is ready.

I already tried to move async/await into Vuex action and it worked. However, I didn't get the difference between them.

Below code is worked for me:

Component:

mounted() {
            this.loading = true;

            this.$store.dispatch('product/getProducts', 'bestseller').then((res) => {
                this.loading = false;
            });
        },

Vuex action:

async getProducts({commit}, type) {
        let res = await axios.get(`/api/products/${type}`);

        commit('SET_PRODUCTS', {products: res.data, type});
    }

score 41 · Accepted Answer · answered Apr 16 '19 at 05:23

41

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.

answered Apr 16 '19 at 05:23

jian

1,236
11
11

1

"you are implicitly returning undefined and await undefined would immediately resolve" This helped for my case.Thanks ! – Thakur Karthik Jan 13 '21 at 05:17
totally forgot to return the axios promise, life saver! – Amr SubZero Aug 19 '21 at 06:15
woooo im glad to find this solution, thank you so so much! – Nagisa Ando Aug 24 '21 at 18:26

score 6 · Answer 2 · answered Apr 16 '19 at 05:24

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.

Async/Await with Vuex dispatch

2 Answers2

Linked