我正在嘗試在頁面上顯示公告清單（從 API 檢索）。我正在使用 Vuex 商店，並且有一個名為公告的狀態(tài)。我還希望每次用戶刷新/進入頁面時都會更新此列表。所以我使用了生命週期鉤子，特別是 Mounted()。 我有一個調(diào)度函數(shù)，它將俱樂部 ID 作為參數(shù)。問題是我嘗試存取 Vue 元件中的公告數(shù)組，它比 Vuex 儲存中的版本慢了一步。
以下內(nèi)容位於 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;
}
},
};
列印語句之後，執(zhí)行順序不是我期望的
我期望的順序是這樣的：內(nèi)部資料 -> 內(nèi)部調(diào)度 -> 內(nèi)部突變 -> 調(diào)度後。
另一個問題是，當(dāng)我刷新頁面時，我期望再次調(diào)用mounted()，並且數(shù)組將被更新並再次顯示，但是當(dāng)刷新時數(shù)組的所有內(nèi)容都消失了
1
0
0
這是因為 this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id) 正在對伺服器做出回應(yīng)並且是異步的，並且需要時間從伺服器取得公告。而 console.log("Afterdispatch function") 在從伺服器收到回應(yīng)之前執(zhí)行。
這就是為什麼您首先看到後調(diào)度函數(shù)，然後再看到內(nèi)部調(diào)度函數(shù)。
嘗試像這樣在調(diào)度之前放置等待。
async mounted() {
await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
console.log("After dispatch function")
},
你應(yīng)該回到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)
})
},
