$commit是Vue.js中的一個(gè)核心方法,在代碼中通過this.$commit來調(diào)用。這個(gè)方法是用來提交一個(gè)mutation,即提交一個(gè)用來修改state的方法,如果你使用了vuex來管理你的應(yīng)用狀態(tài),那么$commit就是相當(dāng)重要的一個(gè)方法了。$commit方法需要傳入兩個(gè)參數(shù),第一個(gè)是要提交的mutation的名稱,第二個(gè)是傳入的參數(shù)。舉個(gè)簡單的例子:
methods: { addCount(val) { this.$commit('ADD_COUNT', val) } }
在上面的代碼中,我們定義了一個(gè)方法addCount,它通過this.$commit來提交一個(gè)名為'ADD_COUNT'的mutation,并將val作為參數(shù)傳入。下面我們來看一下如何在vuex中定義這個(gè)mutation:
mutations: { ADD_COUNT(state, num) { state.count += num } }
在上面的代碼中,我們定義了一個(gè)名為ADD_COUNT的mutation,它接受一個(gè)state和一個(gè)num參數(shù),然后將state中的count屬性加上num。通過這個(gè)例子,我們可以看到$commit方法和mutation之間的關(guān)系:$commit用來提交一個(gè)mutation,而mutation則用來修改state中的屬性。當(dāng)我們調(diào)用$commit提交一個(gè)mutation時(shí),Vue.js會(huì)自動(dòng)幫我們調(diào)用mutation來修改相應(yīng)的state屬性。而對于state的訪問,則需要用到$store.state屬性。
最后,需要注意的是,$commit方法只能用來提交同步的mutation,如果你需要提交異步的mutation,那么你需要使用$dispatch方法。$dispatch方法的使用方式和$commit方法類似,只是它用來提交一個(gè)action而不是mutation。在提交action時(shí),你需要在vuex中定義這個(gè)action,并在它內(nèi)部調(diào)用$commit來提交mutation。