Vuex跨模块：如何在demands模块Action中有序派发meetings模块Action

• 第一处执行顺序异常的根源：getDemands内发起的Firestore查询没有纳入async函数的等待链路，.then块内部的逻辑和外层派发getMeetings的代码完全是平行执行的，根本没有先后依赖，导致getMeetings在demands数据未拉取完成时就被触发。
• 第二处数据为空的根源：getMeetings内部嵌套的异步查询没有做Promise链路串联，用forEach遍历异步子查询时不会等待请求完成，直接在同步代码段执行commit，这时候所有Firestore的网络请求还在执行中，meetings数组自然为空。

1. 修正demands模块的getDemands Action #

把所有异步操作纳入统一的async等待链，等demands数据完全拉取、提交到store后，再派发getMeetings：

// demands.js
export default {
  namespaced: true,
  state: {
    demands: []
  },
  actions: {
    async getDemands({ rootState, commit, dispatch }) {
      const { uid } = rootState.auth.user
      if (!uid) return Promise.reject('用户未登录！')
      const userRef = db.collection('profiles').doc(uid)

      // 直接await Firestore查询结果，不使用无返回值的裸.then
      const snapshot = await db.collection('demands')
        .where('toUser', "==", userRef)
        .get()

      const demands = await Promise.all(
        snapshot.docs.map(doc =>
          extractDataFromDemand({ id: doc.id, demand: doc.data() })
        )
      )
      commit('setDemands', { resource: 'demands', demands })

      // 等待demands提交完成后，再跨模块派发getMeetings
      await dispatch("meetings/getMeetings", null, { root: true })
    }
  },
  mutations: {
    setDemands(state, { resource, demands }) {
      state[resource] = demands
    }
  }
}

2. 修正meetings模块的getMeetings Action #

替换无法等待异步操作的forEach写法，用map + Promise.all的结构收集所有子查询的结果，等所有数据拉取完成后再提交mutation：

// meetings.js
export default {
  namespaced: true,
  state: {
    meetings: []
  },
  actions: {
    async getMeetings({ rootState, commit }) {
      const { uid } = rootState.auth.user
      if (!uid) return Promise.reject('用户未登录！')
      const userRef = db.collection('profiles').doc(uid)

      // 拉取所有关联的demand文档
      const demandSnapshot = await db.collection('demands')
        .where('toUser', "==", userRef)
        .get()

      // 将每个demand下的meetings子查询转为独立Promise
      const meetingQueryPromises = demandSnapshot.docs.map(async (demandDoc) => {
        const meetingSnapshot = await demandDoc.ref.collection("meetings").get()
        return meetingSnapshot.docs.map(meetingDoc => ({
          id: meetingDoc.id,
          ...meetingDoc.data()
        }))
      })

      // 等待所有子查询完成，拍平为一维数组
      const meetings = (await Promise.all(meetingQueryPromises)).flat()
      commit('setMeetings', { resource: 'meetings', meetings })
    }
  },
  mutations: {
    setMeetings(state, { resource, meetings }) {
      state[resource] = meetings
    }
  }
}

3. 简化组件侧的调用逻辑 #

不需要在组件内单独派发getMeetings，因为getDemands执行完成后会自动触发依赖它的getMeetings：

// dashboard.vue
export default {
  computed: {
    demands() {
      return this.$store.state.demands.demands;
    },
    meetings() {
      return this.$store.state.meetings.meetings;
    }
  },
  created() {
    this.$store.dispatch("demands/getDemands");
  }
}

• 所有写在async action内的异步操作，必须纳入await/return的Promise链路，不然async函数会提前返回成功状态，根本等不到内部异步逻辑执行完成。
• 遍历执行异步操作时，禁止使用forEach——它是同步循环，不会等待内部Promise完成，必须替换为map + Promise.all的可等待结构。
• 跨命名空间模块派发action时，必须配置第三个参数{ root: true }，否则Vuex会在当前模块的作用域下查找action，找不到对应定义。

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