Nuxt - Wait after async action (this.$store.dispatch)

Question

I'm new to Nuxt and I'm facing an issue that I don't understand.

If i code something like:

const resp1 = await this.$axios.$post('urlCall1', {...dataCall1}); this.$axios.$post('urlCall2', {...dataCall2, resp1.id});

The resp1.id is properly set in the 2nd axios call => we wait for the first call to be completed before doing the 2nd one.

However, when I define asyn actions in my vuex store ex:

 async action1({ commit, dispatch }, data) { try { const respData1 = await this.$axios.$post('urlCall1', { ...data }); commit('MY_MUTATION1', respData1); return respData1; } catch (e) { dispatch('reset'); } }, async action2({ commit, dispatch }, data, id) { try { const respData2 = await this.$axios.$post('urlCall2', { ...data }); commit('MY_MUTATION2', respData2); } catch (e) { dispatch('reset'); } }

and then in my vue component I fire those actions like:

const resp1 = await this.$store.dispatch('store1/action1', data1); this.$store.dispatch('store2/action2', data2, resp1.id);

resp1.id is undefined in action2.

I also tried managing promise the "old way":

this.$store.dispatch('store1/action1', data1).then(resp1 => this.$store.dispatch('store2/action2', data2, resp1.id))

The result is still the same => id = undefined in action2

Can you guys please tell me where I'm wrong ?

Thanks in advance.

Last note: the 2 actions are in different stores

and does the request finish successfully? Maybe the catch() activates and no value is returned - that's why you see undefined — wilkoklak
– wilkoklak, Commented Sep 9, 2020 at 19:56

parker_codes · Accepted Answer · 2020-09-09 20:09:22Z

Vuex doesn't allow multiple arguments, so you have to pass it through as an object, so it could look like:

this.$store.dispatch('store2/action2', { ...data2, id: resp1.id });

And then in the store:

async action2({ commit, dispatch }, { id, ...data }) { try { const respData2 = await this.$axios.$post('urlCall2', { ...data }); commit('MY_MUTATION2', respData2); } catch (e) { dispatch('reset'); } }

Collectives™ on Stack Overflow

Nuxt - Wait after async action (this.$store.dispatch)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related