Async method in Vuejs mixin

Question

I'm trying to reuse a method in multiple vuejs component. I'm using mixin to do this but async method is not working

I have a async method in mixin that wait for an axios call GET-AllDrafts to finish and then run a mutation that updated the draft state value to the returned data from axios call.

async orgUpdateMixin() {
      await this.$store.dispatch('GET_AllDrafts')
                       .then(data => {                                       
                           this.$store.commit('draftUpdate', data);    //mutation                                              
                     })
}

I'm running this method in mounted() method of my component.

mounted(){
   this.orgUpdateMixin();
   console.log(this.data);
}

But for some reason this.data is returning [] empty array. Is there a way to wait for mixin to finish first before continuing.

What about doing await this.orgUpdateMixin();?

Matheus Valenza
– Matheus Valenza

2019-09-06 20:41:15 +00:00
Commented Sep 6, 2019 at 20:41 — Matheus Valenza
– Matheus Valenza, Commented Sep 6, 2019 at 20:41

Matheus Valenza · Accepted Answer · 2019-09-06 20:45:28Z

1

As commented, do:

async mounted() {
  await this.orgUpdateMixin();
  console.log(this.data);
}

answered Sep 6, 2019 at 20:45

Matheus Valenza

9191 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dmitry Polushkin Over a year ago

mounted cannot be async by vuejs v2.6

Collectives™ on Stack Overflow

Async method in Vuejs mixin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related