vuex中mutation和action的詳細區別

const store = new Vuex.Store({
　　state: {
　　　　count: 0
　　},
　　mutations: {
　　　　increment (state) {
　　　　　　state.count++
　　　　}
　　},
　　actions: {
　　　　increment (context) {
　　　　　　context.commit('increment')
　　　　}
　　}
})

 

1、流程順序

“相應視圖—>修改State”拆分成兩部分，視圖觸發Action，Action再觸發Mutation。

2、角色定位

基於流程順序，二者扮演不同的角色。

Mutation：專注於修改State，理論上是修改State的唯一途徑。

Action：業務代碼、異步請求。

3、限制

角色不同，二者有不同的限制。

Mutation：必須同步執行。

Action：可以異步，但不能直接操作State。