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

本文介绍了带有用 Typescript 编写的参数的 vuex getter的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

可以创建一个 vuex store getter，它接受一个参数参数，如下所示:https://vuex.vuejs.org/en/getters.html

One can create a vuex store getter which takes a parameter argument as illustrated here: https://vuex.vuejs.org/en/getters.html

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

I'm using Typescript (https://github.com/hmexx/vue_typescript_starter_kit) to write my code, but I can't figure out how to write a getter that takes a parameter argument. ie, the following does not seem to work:

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
};

推荐答案

基于 vuex 文档您可以实现以下内容:

based on vuex docs you can implement the following:

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

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

in typescript you might try something like this:

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

这篇关于带有用 Typescript 编写的参数的 vuex getter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！