vuejs：从 vuex 调用多个动作的最佳方式答案

【问题标题】：vuejs : best way to call multiple actions from vuexvuejs：从 vuex 调用多个动作的最佳方式
【发布时间】：2021-02-18 09:10:47
【问题描述】：

我正在做一个使用 Vue js 和电子的项目。为了管理状态，我使用 vuex。我至少有 15 个动作要调用一个 Vue 文件。

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'])
}

我不知道这是否是最好的方法，因为在我创建的方法中，我有：

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

这是让我的程序正常工作的好方法吗？

【问题讨论】：

您可以将这些操作包装到另一个操作中，并仅在您的 vue 文件中映射此操作。

标签： vue.js vuex store

【解决方案1】：

创建一个新的特殊操作，它将dispatch所有其他操作：

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');
    //...
  }
}

【讨论】：

你不使用异步方法？
@kevinG73，没关系，你也可以用async:FETCH_AB: async () => { ... }
但是为什么 dispatch 而不是 commit 呢？我想知道当我将它用于我的应用程序时会发生什么
Vuex 调用动作的方式是使用dispatch，commit 是调用突变。见docs。