关于vuex的dispatch()方法提问

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

这段代码是vuexactions.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. 这段代码的作用?

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

回答:

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

解构赋值

回答:

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

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注