我正在嘗試在頁面上顯示公告串列（從 API 中檢索）。我使用Vuex店，我有一個狀態呼叫公告。我還希望每次用戶重繪 /進入頁面時更新此串列。所以我使用了生命周期鉤子，尤其是mounted()。我有一個將俱樂部 ID 作為引數的調度函式。問題是我嘗試訪問 Vue 組件中的announcement 陣列，它比 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;
}
},
};
在列印陳述句之后，執行順序不是我所期望的
我希望順序是這樣的：內部資料 -> 內部調度 -> 內部突變 -> 調度后。
另一個問題是，當我重繪 頁面時，我希望再次呼叫 mount() 并且陣列將被更新并再次顯示，但是當重繪 陣列的所有內容時
uj5u.com熱心網友回復：
這是因為this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)正在對服務器做出回應并且是異步的，并且需要時間從服務器獲取公告。雖然 console.log("After dispatch function")在從服務器收到回應之前執行。
這就是為什么您首先看到After dispatch function和inside dispatch function 的原因。
嘗試像這樣在調度之前放置等待。
async mounted() {
await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
console.log("After dispatch function")
},
你應該回傳 axios.get 方法，因為它是一個 Promise 并且不需要使用 await 然后一起使用。您也可以洗掉異步，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)
})
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367443.html
標籤：javascript Vue.js Vue 组件 Vuex Vuex 模块