首页 > ES6里面,这两段代码是不等价的吗?(示例是vuex里action的一段,es6的展开符写法)

ES6里面,这两段代码是不等价的吗?(示例是vuex里action的一段,es6的展开符写法)

题主在review 小萝卜丁 的vuex-shopping cart中vuex的写法。因为没系统研究过es6,所以想改写为自己更熟悉的写法,虽然没报错,但是不起效果,想了解一下应该怎么改写的。

...在es6里是展开符,或者能够分享一下这个展开的效果吗

小萝卜丁的action.js

export const changePrice = makeAction('CHANGE_PRICE')
export const changeStyle = makeAction('CHANGE_STYLE')
export const addItem = makeAction('ADD_ITEM')
export const removeItem = makeAction('REMOVE_ITEM')

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

我自己的actionA.js

export const changePrice = ({ dispatch }) => {dispatch('CHANGE_PRICE')}
export const changeStyle = ({ dispatch }) => {dispatch('CHANGE_STYLE')}
export const addItem = ({ dispatch }) => {dispatch('ADD_ITEM')}
export const removeItem = ({ dispatch }) => {dispatch('REMOVE_ITEM')}

应该是这样的:

export const changePrice = ({ dispatch }, ...args) => dispatch('CHANGE_PRICE', ...args)
export const changeStyle = ({ dispatch }, ...args) => dispatch('CHANGE_STYLE', ...args)
export const addItem = ({ dispatch }, ...args) => dispatch('ADD_ITEM', ...args)
export const removeItem = ({ dispatch }, ...args) => dispatch('REMOVE_ITEM', ...args)

2个问题
一个是箭头函数后面有无{}的区别
第二个问题时...args必须照抄 要记得你返回的是一个函数 你现在写法函数只能处理一个参数了


action.js

"use strict";

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

actionA.js

'use strict';

exports.__esModule = true;
var changePrice = exports.changePrice = function changePrice(_ref) {
  var dispatch = _ref.dispatch;
  dispatch('CHANGE_PRICE');
};

https://babeljs.io/repl/

【热门文章】
【热门文章】