旧式 JavaScript 参数中的 JavaScript ES6 花括号

Question

我在 WebView 中使用 Vue/VueX，在仅支持 Chrome 30 的 Android 5.0.2 模拟器上进行测试时，我注意到页面无法加载。

我追踪到缺少 ES6 支持，并决定将页面“降级”为旧式 JavaScript。

我在使用以下语法时遇到一些问题

actions: {
  push_back_button       ({ commit }, callback)       { commit('push_back_button', callback)          },
  pop_back_button        ({ commit })                 { commit('pop_back_button')                     },
  ...

我试图翻译成

actions: {
  push_back_button:       function (commit, callback)       { commit('push_back_button', callback)          },
  pop_back_button:        function (commit)                 { commit('pop_back_button')                     },
  ...

但是我在加载过程中收到一条消息，指出Uncaught TypeError: commit is not a function。

我该如何正确地做到这一点？我没有使用像 webpack 这样的东西，它按原样在浏览器/WebView 中运行，并且页面的 ES6 版本在支持它的设备上运行良好。

Answer 1

push_back_button 和 pop_back_button 期望第一个参数是一个对象。

({ commit }) 解构对象参数以获取其属性 commit

actions: {
  push_back_button:       function (object, callback)       { object.commit('push_back_button', callback)          },
  pop_back_button:        function (object)                 { object.commit('pop_back_button')                     },
}

function fn(parent) {
	console.log("called from", parent);
}

function es5_fn(object) {
	object.fn("es5_fn");
}

function es6_fn({fn}) {
	fn("es6_fn");
}

es5_fn({fn});
es6_fn({fn});