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' 变量。< /p>

我想请您解释一下，是我没有理解 JS 中的某些内容，还是 Vuex 特定的内容？

Answer 1

请参阅这里的咖喱箭头函数示例：https://stackoverflow.com/a/32787782/11375753

然而，当我们考虑到 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() 将返回一个函数。我们可以用我们的论点再次调用它。

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

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

Vuex 方法风格的访问 Getter

1 个答案: