在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 作为第二个参数(可选)”。
你可以理解为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 参数解构的问题
变量的解构赋值