Vuex 方法风格的访问获取器

Question

我有点难以理解以下 JS:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
})

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

这两段代码摘自官方 Vuex 文档on Method Style Access for Getters。

现在我不明白的是，代码的第二部分是如何输出注释中的值的？可能是我没看懂 JS 函数？

我相信输出会是：

(id) => {
  return state.todos.find(todo => todo.id === id)
}

所以实际上返回的是第二个函数，因为在他们使用的调用中，我没有看到两个 '()()' 也不知道函数从哪里接收 'state' 变量.

我想请教一个解释，是我误解了 JS 中的某些东西，还是 Vuex 特有的东西？

Answer 1

查看柯里化箭头函数示例：

然而，当我们考虑到 vuex getter 方法时，它的工作原理如下。

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

我们在属性中定义了一个函数，叫做getToboById。
并且我们在调用第一个函数时定义了另一个函数。在示例 (id) => {} 中。这将采取我们的说法。
第一个声明的(state)部分。如果我们采用常规 getter 而不采用参数。我们总是可以访问 state 参数。 Vuex 为每个 getter 函数提供了这个。
所以当我们调用以下内容时：store.getters.getTodoById(2)。你实际上在做 store.getters.getTodoById()(2)。在第一个函数调用中，您已经包含了状态。

所以，总结一下：这个函数调用 store.getters.getTodoById() 将 return 我们一个函数。我们可以用我们的论点再次调用它。

并且根据链接的示例将如下所示：

  getTodoById: function(state) {
    return function(id) {
      return state.todos.find(todo => todo.id === id);
    }
  }

Answer 2

这里涉及到“函数的柯里化”，简单来说：

//①
const add = (x, y) => x + y;
add(2,3) // 5

此代码的柯里化将是：

//②
const add = x => y => x + y;

转成ES5代码是这样的：

const add = function(x){

在那：

getters: {
    //...
    getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

可以写成它的等价形式（就像②和①等价）：

getters: {
    //...
    getTodoById: (state,id) => {
        return state.todos.find(todo => todo.id === id)
    }
}

state参数是getters的默认参数，所以可以这样调用：

store.getters.getTodoById(2);

参考：

Vuex 方法风格的访问获取器

Vuex Method-style Access Getters

javascript

function

vue.js

vuex