怎样理解js函数参数使用大括号（vuex手册中一个例子）？

Question

vuex手册中的tutorial里，“计数器加一”的例子，创建的action函数使用了大括号{}把参数包起来，不太理解：

export const incrementCounter = function ({ dispatch, state }) {
  dispatch('INCREMENT', 1)
}

{}通常表示一个对象，这里作为action函数的参数传入，看起来有点多余。
我尝试去掉{}:

export const incrementCounter = function (dispatch, state) {
  dispatch('INCREMENT', 1)
}

发现代码不能正确运行：点“＋1”按钮，计数器的值不变,一直为0:

当然这个尝试应该是有点问题的，浏览器有报错：

哪位可以详细解释下原理和作用吗？

Answer 1

https://developer.mozilla.org...

Answer 2

自问自答一个，算是表达自己对于vuex文档中使用的“函数参数的解构赋值”的看法。

我认为这里使用{}解构赋值的目的在于，后续调用传入参数（它是一个对象）的一些属性时，能省去前缀，尤其当属性比较多的时候。

但是其实可以使用另一种做法，类似于php中处理HTTP的GET或POST请求时的extract()函数，直接把对象的key都提取出来，有人也给出了简单的实现：

function extract(data, where) {
    for (var key in data) {
        where[key] = data[key];
    }
}

function runTest() {
    var myData = { name: "Olly", age: 19, };
    extract(myData, this);
    alert(name +" is "+ age +"!");
}

runTest();