vuejs : best way to call multiple actions from vuex

Question

I am working on a project in which I am using Vue js and electron. To manage the state I use vuex. I have at least 15 actions to call in only one Vue file.

methods: {
  ...mapActions('Store1', ['FETCH_AB']),
  ...mapActions('Store2', ['FETCH_DS']),
  ...mapActions('Store3', ['FETCH_SD']),
  ...mapActions('Store4', ['FETCH_XD']),
  ...mapActions('Store5', ['FETCH_SD']),
  ...mapActions('Store6', ['FETCH_AZ'])
}

I don't know if it's the best method, because in my created method, I have:

async mounted(){
  this.FETCH_AZ()
  this.FETCH_DS()
  ....
}

is this a good method for my program to work properly?

Answer 1

Create a new special action which will dispatch all the others:

actions: {
  FETCH_AB: ()  => {
    // ...
  },
  FETCH_DS: ()  => {
    // ...
  },
  FETCH_SD: ()  => {
    // ...
  },
  // Rest of the actions...


  FETCH_ALL: ({ dispatch }) => {
    // Dispatch all the actions here
    dispatch('FETCH_AB');
    dispatch('FETCH_DS');
    dispatch('FETCH_SD');
    //...
  }
}