关于vuex的dispatch()方法提问

Question

function makeAction(type) {   return ({ dispatch }, ...args) => dispatch(type, ...args); };这段代码是vuex中actions.js里的代码，通过babel转成es5后代码如下：function makeAction(type) {   return function (_ref) {       for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {       args[_key - 1] = arguments[_key];     }         var dispatch = _ref.dispatch;         return dispatch.apply(undefined, [type].concat(args));   }; };疑问如下：这里的dispatch从哪里定义的？这段代码的作用？感谢各位大神的悉心回答！！！！

Answer 1

官方文档的说法是：触发 mutation handler 的方法是 dispatch 一个 mutation 的事件名。

function makeAction(type) { 
 return ({ dispatch }, ...args) => dispatch(type, ...args);
};

我理解的是：这段代码的作用就是触发一个名为‘type‘的mutaition事件，...args是额外的参数。
但是这里的{ dispatch }参数我不明白是什么，希望大神能帮忙补充一下。

Answer 2

这个是 es6 的语法，是“解构赋值使用”， 比如：

function foo({x, y = 5}) {

  console.log(x, y);

}

foo({}) // undefined, 5

foo({x: 1}) // 1, 5

foo({x: 1, y: 2}) // 1, 2

foo() // TypeError: Cannot read property 'x' of undefined

对于 vuex 中的 action 来说，actions 调用的第一个参数是store的实例，有dispatch等方法属性，调用相当于：

function foo({dispatch}) {
  dispatch();
}
foo({dispatch: function(){...}})