在Vuex教程中有這樣一段
Action
Action 類似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接變更狀態。
- Action 可以包含任意異步操作。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
在actions這段代碼下,穩當寫到用es2015的結構方法對代碼做了簡化
actions: {
increment ({ commit }) {
commit('increment')
}
}
在vuex的api中action的部分有這樣一句話“處理函數總是接受 context 作為第一個參數,payload 作為第二個參數(可選)”。
image.png你可以理解為action中的函數會默認自動獲取context這個對象為第一個參數。
而context這個對象擁有和store相同的屬性和方法,從圖中可以看到。
所以這段解構實際上是這樣的
{commit} = context //context是自動獲取的對象
上面這段代碼怎么理解的,可以去看下es2015對象解構賦值這一塊
對象的解構賦值,可以很方便地將現有對象的方法,賦值到某個變量。
// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello
上面代碼的例一將Math對象的對數、正弦、余弦三個方法,賦值到對應的變量上,使用起來就會方便很多。例二將console.log賦值到log變量。
這樣一來就很好理解了,因為context對象中有commit方法,所以直接解構了
本篇文章是個人理解,如果有錯誤希望能告知
參考鏈接:
vuex 參數解構的問題
變量的解構賦值