Question

上下文

我有两个商店模块：“会议”和“需求”。在商店“需求”中，我有“getDemands”动作，在商店“会议”中，我有“getMeetings”动作。在 Firestore 中访问会议数据之前，我需要知道需求的 Id（例如：requirements[i].id），因此必须在调度“getMeetings”之前运行并完成“getDemands”操作。

Vuex 文档 dispatching-action 非常完整，但我仍然不知道如何将其放入我的代码中。这里还有一些关于该主题的其他很好的回答问题：

我想知道实现我想要实现的目标的最佳方式。从我的角度来看，这可以通过从另一个操作触发一个操作或使用 async/await 来完成，但我无法实现它。

dashboard.vue

  computed: {
    demands() {
      return this.$store.state.demands.demands;
    },
    meetings() {
      return this.$store.state.meetings.meetings;
    }
  },
  created() {
    this.$store.dispatch("demands/getDemands");
   
    //this.$store.dispatch("meetings/getMeetings"); Try A : Didn't work, seems like "getMeetings" must be called once "getDemands" is completed
  },

VUEX 商店模块 A – requires.js

export default {
  namespaced: true,
  state: {
    demands:[], //demands is an array of objects
  },
  actions: {

// Get demands from firestore     UPDATED

    async getDemands({ rootState, commit, dispatch }) {
      const { uid } = rootState.auth.user
      if (!uid) return Promise.reject('User is not logged in!')

      const userRef = db.collection('profiles').doc(uid)

      db.collection('demands')
        .where('toUser', "==", userRef)
        .get()
        .then(async snapshot => {
          const demands = await Promise.all(
            snapshot.docs.map(doc =>
              extractDataFromDemand({ id: doc.id, demand: doc.data() })
            )
          )
          commit('setDemands', { resource: 'demands', demands })
          console.log(demands)  //SECOND LOG
        })
      await dispatch("meetings/getMeetings", null, { root: true })    //UPDATE
    },

...

mutations: {
    setDemands(state, { resource, demands }) {
      state[resource] = demands
    },

...

模块 B – meeting.js


export default {
  namespaced: true,
  state: {
    meetings:[],
  },
  actions: {

// Get meeting from firestore    UPDATED

getMeetings({ rootState, commit }) {
      const { uid } = rootState.auth.user
      if (!uid) return Promise.reject('User is not logged in!')

      const userRef = db.collection('profiles').doc(uid)

      const meetings = []

      db.collection('demands')
        .where('toUser', "==", userRef)
        .get()
        .then(async snapshot => {
          await snapshot.forEach((document) => {
            document.ref.collection("meetings").get()
              .then(async snapshot => {
                await snapshot.forEach((document) => {
                  console.log(document.id, " => ", document.data())  //LOG 3, 4
                  meetings.push(document.data())
                })
              })
          })
        })
      console.log(meetings)    // FIRST LOG
      commit('setMeetings', { resource: 'meetings', meetings })
    },

...

mutations: {
    setMeetings(state, { resource, meetings }) {
      state[resource] = meetings
    },
...

Answer 1

语法：

dispatch(type: string, payload?: any, options?: Object): Promise<any

正确调用

dispatch("meetings/getMeetings", null, {root:true})

如何从另一个 Vuex 商店模块中的另一个动作中分派一个动作？

上下文

1 个答案: