Vuex系列 Actions的理解之我見

2022-09-13 09:57:08 字數 1435 閱讀 8223

恕小端不才,對action的總結如下:

接下來我們通過上面三點總結來看actions的使用:

我們先在actions.js定義乙個addcountaction方法用來做累加器

const actions = ,

addcountaction (context)

}export default actions

在元件中通過.dispatch進行分發actions,內容如下:

}

+add

在actions.js中定義乙個新方法reducecountaction方法,實現乙個累減

const actions = ,

addcountaction (context) ,

reducecountaction (context)

}export default actions

在元件中通過.dispatch進行分發actions,內容如下:

-reduce

}+add

我們將actions.js中的addcountaction函式修改如下:

addcountaction (context) , 2000)

}

修改後我們發現在執行累加的時候,會等待兩秒才會執行。

將之前的元件addcountaction函式用輔助函式替代,修改如下:

-reduce

}+add

action通常是非同步的,那麼如何知道action什麼時候結束呢?更重要的是,我們如何才能組合多個action,以處理更加複雜的非同步流程?

首先,你需要明白 store.dispatch 可以處理被觸發的 action 的處理函式返回的 promise,並且 store.dispatch 仍舊返回 promise:

const actions = ,

addcountaction (context) , 1000)

})},

reducecountaction (context) ,

addtwoaction (context) )

}}export default actions

在上面我們在addtwoaction函式中實現了乙個組合的actions

// 假設 getdata() 和 getotherdata() 返回的是 promise

actions: ) ,

async actionb ()

}

乙個store.dispatch在不同模組中可以觸發多個action函式。在這種情況下,只有當所有觸發函式完成後,返回的promise才會執行。

最後,我們說下官方的定義,在官網是這樣定義的actions:

Vuex簡單入門5 actions

action 可以包含任意非同步操作。1.在store.js建立actions 可以在中間呼叫 mutation中的方法 將actions加入store constactions reduceaction export default newvuex.store 2.count.vue中 impor...

vuex的5個核心概念三(actions)

4.actions 非同步操作 在某些情況下確實在vuex中需要進行非同步操作,比如網路請求,這個時候就要將方法寫在actions中 actions類似於mutations,但是是用來替代mutations進行非同步操作的 在actions中提交mutation,並且可以包含任何的非同步操作。act...

Vuex中actions何時完成及後續業務邏輯呼叫

先上問題,我的需求是在呼叫actions中的getposition來獲取經緯度,從而修改state中的值,再通過state中的經緯度發起getaddress獲取當前位置的請求,這就關乎到乙個呼叫時機的問題 獲取經緯度 獲取位址 如果是當前這樣同步呼叫的話,就會出現state中經緯度的值還沒獲取或修改...