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

Question

我正在尝试在页面上显示公告列表（从 API 检索）。我正在使用 Vuex 商店，并且有一个名为公告的状态。我还希望每次用户刷新/进入页面时都会更新此列表。所以我使用了生命周期钩子，特别是 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("Afterdispatch function") 在从服务器收到响应之前执行。

这就是为什么您首先看到后调度函数，然后再看到内部调度函数。

尝试像这样在调度之前放置等待。

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

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

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)
            })
        },