nuxt.js - How to execute two different Vuex actions sequentially from a component method with async/await

Question

I am saving user data first in Vuex store, and then in database through API call.

export const actions = {
  async userStateUpdate({ commit }, payload) {
    await commit('USER_UPDATE', payload)
  },
  async userDatabaseUpdate({ state }) {
    await this.$axios.post('api/user', {
      user: state.user,
    })
  }
}

I'm calling these two methods this way in my component:

methods: {
  async update(path, value) {
    await this.$store.dispatch('userStateUpdate', { path, value })
      .then(() => {
        console.log('user saved in state')
        this.$store.dispatch('userDatabaseUpdate')
      })
      .then(() => {
        console.log('user saved in database')
      })
      .catch(err) => {
        console.log('user not  saved in store?? or database??')
        console.log(err)
      })
  }
}

Is it a recommended way of using async/await ? How to know in the last catch if the error comes from the first or from the second action ?

question from:https://stackoverflow.com/questions/65935657/how-to-execute-two-different-vuex-actions-sequentially-from-a-component-method-w

Answer 1

Here's one way you could use just async/await syntax and separate out the error checking with try/catch:

async update(path, value) {
  // Update Vuex
  try {
    await this.$store.dispatch('userStateUpdate', { path, value });
  } catch(err) {
    console.log('error updating store');
    // return;   // You could exit here to avoid a database update on error
  }
  // Update database
  try {
    await this.$store.dispatch('userDatabaseUpdate')
  } catch(err) {
    console.log('error updating database');
  }
}