关于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));
  };
};

疑问如下：

1. 这里的dispatch从哪里定义的？

2. 这段代码的作用？

感谢各位大神的悉心回答！！！！

Answer 1

这个是 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(){...}})

解构赋值

Answer 2

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

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

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

Answer 3

首先：
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,所以它拥有与store相同的dispatch属性，因此你可以通过:function foo(obj) { obj.dispatch();} 这种方式调用，也可以使用function foo({dispatch}){dispatch()}这种解构方式调用。
其次：
context对象并不是store对象，因为在module中有嵌套store，context只是代表上下文环境对象,因此它还可以使用fun({state, getters, rootState})中的rootState访问根实例状态。

Answer 4

楼主你知道了吗，，我现在遇到 没看懂呢。。。。能解释下吗。。。