javascript - VueJS 调度函数的执行顺序导致问题

Question

我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店，我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(Hook)，尤其是 mounted()。我有一个以俱乐部 ID 作为参数的调度函数。问题是我尝试访问 Vue 组件中的公告数组，它比 Vuex 商店中的版本落后一个“步骤”。

下面是在Vue组件ClubDetails.vue中

  name: "ClubDetails",
  data(){
    console.log("inside data")
    return {
      club_id: this.$route.params.clubID,
      announcements: this.$store.state.ClubDetails.announcements
    }
  },
  mounted() {
      this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
      console.log("After dispatch function")
  },

这是我的商店 ClubDetails.js

    namespaced: true,
    state: {
        announcements: [],
    },
    mutations: {
        setAnnouncements(state, newArr) {
            state.announcements = newArr
            console.log("Inside Mutation")
        },
    },
    actions: {
        async getAnnouncements({ commit, state }, club) {
            const params = new URLSearchParams([
                ['clubId', club]
            ]);
            await axios.get("http://127.0.0.1:8000/api/announcements", { params }).then(res => {
                console.log("inside dispatch function")
                commit('setAnnouncements', res.data)

            }).catch(err => {
                console.log(err)
            })
        },
    },
    getters: {
        getAllAnnouncements(state) {
            return state.announcements;
        }
    },
}; 

在打印语句之后，执行顺序不是我所期望的

我希望顺序是这样的:内部数据 -> 内部调度 -> 内部突变 -> 调度后。

另一个问题是，当我刷新页面时，我希望再次调用 mounted() 并且数组将被更新并再次显示，但是当刷新时数组的所有内容都消失了

Answer 1

这是因为 this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在对服务器做出响应并且是异步的并且需要时间从中获取公告服务器。 console.log("After dispatch function") 在从服务器收到响应之前执行。

这就是为什么您首先看到After dispatch function，然后看到inside dispatch function。

尝试像这样将 await 放在 dispatch 之前。

  async mounted() {
      await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
      console.log("After dispatch function")
  },

您应该返回 axios.get 方法，因为它是一个 Promise，无需同时使用 await 和 then。您还可以从 getAnnouncements 中删除异步，因为您不再使用 await。

 getAnnouncements({ commit, state }, club) {
            const params = new URLSearchParams([
                ['clubId', club]
            ]);
            return axios.get("http://127.0.0.1:8000/api/announcements", { params }).then(res => {
                console.log("inside dispatch function")
                commit('setAnnouncements', res.data)

            }).catch(err => {
                console.log(err)
            })
        },