2 回答

TA貢獻(xiàn)1712條經(jīng)驗 獲得超3個贊
我今天在 vuex 中使用保存承諾測試了這個,它完美地工作。例子:
async loadUsers ({ state, commit }) {
if (state.users.length) {
return state.users
}
if (state.fetchPromise) {
return state.fetchPromise
}
let promise = fetch(usersUrl).then((response) => {
commit('SET_USERS', response.data)
})
commit('SET_PROMISE', promise);
return promise
}
現(xiàn)在可以在許多完全獨立的組件中使用它,而無需多次調(diào)用 request 并且不會破壞任何東西。例如它在主布局上運行它:
created () {
this.$store.dispatch('users/loadUsers')
}
它是在沒有等待的情況下調(diào)用的,因此是異步的并且不會阻止渲染頁面。但是在用戶列表頁面上,此列表是必需的,因此我們可以在這里放置:
async beforeMount () {
await this.$store.dispatch('users/loadUsers')
}
結(jié)果: loadUsers 將被分派兩次 - 一次來自布局,第二次來自用戶列表,但它只會發(fā)送請求一次。此外,用戶列表將正確等待響應(yīng),而不是嘗試呈現(xiàn)沒有數(shù)據(jù)的內(nèi)容。

TA貢獻(xiàn)1865條經(jīng)驗 獲得超7個贊
我不得不處理類似的事情,這就是我解決它的方法:
在您的主文件中,定義一個新的狀態(tài)變量,稱為pending。你可以在你的loadUsers操作中使用它:
async loadUsers ({ state, commit }) {
if (state.users.length) {
return state.users;
}
if (state.isPending) {
return;
}
commit('SET_PENDING_STATE', true);
const users = await fetch(usersUrl);
commit('SET_PENDING_STATE', false);
commit('SET_USERS', users);
}
添加回答
舉報