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。

mutation和action區別