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