CODEWITHSUNDEEP
javascriptvue.jsasync-await
smith
smith

Reputation: 373

How can use await/async in vue mounted

I am trying to use mapGetters value in my other computed property. It showing null because the preferences method not executed completed. I want to wait until the store set the getter and setter. I am tried async/await but it's not working

mounted() {
  this.preferences();
  this.selectedColumnsHeader;
},

methods: {
  async preferences() {
    await this.$store.dispatch('fetchPreferences');
  }
}

store

fetchPreferences({ commit }) {
  return http
    .get('/help_ticket_preferences.json')
    .then((res) => {
      commit('setPreferences', res.data.preference);
    })
    .catch((error) => {
      commit('setErrorMessage', `Sorry, there was an error fetching help ticket preferences ${error.message}.`);
    });
},

Upvotes: 1

Views: 3114

Answers (1)

Bravo
Bravo

Reputation: 6254

Firstly, you need to await for this.preferences() in mounted

async mounted() {
  await this.preferences();
  this.selectedColumnsHeader;
},

secondly, you need to return a Promise in fetchPreferences

fetchPreferences({ commit }) {
  return http
    .get('/help_ticket_preferences.json')
    ..... etc

Hoe that helps

Upvotes: 2

Related Questions