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

Question

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

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

尝试像这样在发送之前放置 await。

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

您应该 return 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)
            })
        },

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

Order of Execution for VueJS dispatch function is causing an issue

javascript

vue.js

vue-component

vuex

vuex-modules