带有用 Typescript 编写的参数的 vuex getter答案

【问题标题】：vuex getter with argument written in Typescript带有用 Typescript 编写的参数的 vuex getter
【发布时间】：2018-04-20 04:23:52
【问题描述】：

可以创建一个 vuex 存储 getter，它采用如下所示的参数参数：https://vuex.vuejs.org/en/getters.html

我正在使用 Typescript (https://github.com/hmexx/vue_typescript_starter_kit) 来编写我的代码，但我不知道如何编写一个带有参数参数的 getter。即，以下似乎不起作用：

export function getItemById(state : State, id : Number) : MyItem | undefined     {
  if(id === undefined) {
    return undefined;
  }
  for(const item of state.items) {
    if(item.id === id) {
      return item;
    }
  }
  return undefined;
}

export default <GetterTree<State, any>> {
  getItemById
};

【问题讨论】：

你能提供你的商店代码吗？
@classicalConditioning 我正在尝试以这种方式使用它：this.$store.getters.getItemById(2);但是我看到一个错误，说 this.$store.getters.getItemById 是未定义的
如果我从函数中删除 id : Number 那么 this.$store.getters.getItemById 会正确解析，但我无法传递任何内容，因为它认为它不是函数
对于初学者 - 在你的 default export 中你不应该导出 getItemById 而不是 getCommand 吗？同样在 vuex 指南中 - 似乎如果你想通过 id 查询 - 你的 getter 应该返回一个以 id 作为参数的函数，然后返回相应的项目
抱歉，默认导出中有错字。我现在修好了。我同意我需要一个函数，你能给我看一个关于如何在 TypeScript 中定义它的代码 sn-p 吗？我尝试了以下方法，但这也不起作用： const getItemById = function (state: State, id: Number): MyItem | undefined { //这里是正文 }

标签： typescript arguments getter vuex

【解决方案1】：

基于vuex docs，您可以实现以下功能：

getters: {
  // ...
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

在打字稿中你可以尝试这样的事情：

export default {
  getItemById(state: State, getters: any) {
    return (id: number) => {
      return state.items.find(item => item.id === id);
    }
  }
}

【讨论】：