Vuex多模块场景下如何调用根Action实现DRY代码？

嘿，我来帮你搞定这个问题！你已经把根Action注册到Vuex Store里了，接下来要在各个子模块里调用这些通用的根Action，只需要记住一个关键配置就行。

模块内调用根Action的核心方式 #

在子模块的Action函数中，你可以通过dispatch方法的第三个参数指定{ root: true }，告诉Vuex：“我要找的是根级别的Action，不是当前模块的！”

举个实际的例子，假设你的rootactions里有一个通用的API请求处理方法handleApiRequest，现在要在users模块的Action里调用它：

// users模块的actions.js
export default {
  async fetchUserList({ dispatch }) {
    // 调用根Action的handleApiRequest方法，传递请求参数，并指定root: true
    const apiResponse = await dispatch(
      'handleApiRequest', 
      { url: '/api/users', method: 'GET' }, 
      { root: true }
    );
    
    // 拿到返回结果后处理模块内的状态更新
    // commit('SET_USERS', apiResponse.data)
  }
}

组件内调用根Action（额外补充） #

如果是在Vue组件里调用根Action就更直接了，不需要额外参数，直接通过$store.dispatch调用即可：

// 某个Vue组件的方法里
async loadData() {
  await this.$store.dispatch('handleApiRequest', { url: '/api/classes' });
}

为什么要加root: true？ #

Vuex默认会在当前模块的命名空间下查找Action（如果模块开启了命名空间的话），加上{ root: true }就会强制跳过当前模块，直接去根级的Actions里匹配对应的方法，完美实现你想要的DRY复用效果！

内容的提问来源于stack exchange，提问作者LakiGeri