vuex中mutation和action的詳細區別

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

 

一、流程順序

「相應視圖—>修改State」拆分紅兩部分，視圖觸發Action，Action再觸發Mutation。

二、角色定位

基於流程順序，兩者扮演不一樣的角色。

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

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

三、限制

角色不一樣，兩者有不一樣的限制。

Mutation：必須同步執行。

Action：能夠異步，但不能直接操做State。