我正在嘗試在頁面上顯示公告清單（從 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()，並且數組將被更新並再次顯示，但是當刷新時數組的所有內容都消失了