Vuex中Action的解构赋值理解

在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方法，所以直接解构了

本篇文章是个人理解，如果有错误希望能告知