當前位置:編程學習大全網 - 源碼下載 - 詳解vuex中action何時完成以及如何正確調用dispatch的思考

詳解vuex中action何時完成以及如何正確調用dispatch的思考

在項目中遇到關於action與dispatch使用的壹些細節問題,經過搜索得到了壹些答案。

特意在此提出,如有錯誤還請指出,十分感謝~

問題1:如果action是異步的,那麽怎麽知道它什麽時候完成?在vuex的官網給出了答案:

註:如果需要通過組合多個action來完成某些邏輯,用async/await會更簡單壹點

問題2: 如果action是同步的,就不需要等待它完成了嗎?

其實這個問題相當於在w:dispatch('some action')是壹個同步函數還是異步函數。

如果dispatch是壹個異步函數(返回壹個promise),那麽即使action裏面的邏輯是同步的,如果需要等待這個action完成之後才進行某些操作,仍然是需要用異步等待dispatch().then(()=> {})來實現

通過查看vuex的源碼找到了答案:

dispatch (_type, _payload) {

// check object-style dispatch

const {

type,

payload

} = unifyObjectStyle(_type, _payload)

const action = { type, payload }

const entry = this._actions[type]

if (!entry) {

if (process.env.NODE_ENV !== 'production') {

console.error(`[vuex] unknown action type: ${type}`)

}

return

}

try {

this._actionSubscribers

.filter(sub => sub.before)

.forEach(sub => sub.before(action, this.state))

} catch (e) {

if (process.env.NODE_ENV !== 'production') {

console.warn(`[vuex] error in before action subscribers: `)

console.error(e)

}

}

const result = entry.length > 1

? Promise.all(entry.map(handler => handler(payload)))

: entry[0](payload)

return result.then(res => {

try {

this._actionSubscribers

.filter(sub => sub.after)

.forEach(sub => sub.after(action, this.state))

} catch (e) {

if (process.env.NODE_ENV !== 'production') {

console.warn(`[vuex] error in after action subscribers: `)

console.error(e)

}

}

return res

})

}

dispatch函數返回的是壹個promise,所以dispatch後如果需要跟進操作(比如dispatch裏面commit了壹個state,後續要用到這個state),正確的做法應該是需要用異步的方式來完成後續的邏輯

註:用同步的寫法看起來好像state也是對的,但可能只是恰好我的業務場景io使用不是很高所以"看起來是對的",嚴謹的做法應該還是需要用異步來完成後續操作的

  • 上一篇:桔子有傳說沒
  • 下一篇:如何使用Spring Cloud
  • copyright 2024編程學習大全網