Web 系 Vue.js

vuex-module-decorators の Getter で引数を使う方法(Method-Style Access)

10/03/2019

Getter 部分

// getter 名はこれまで通り記述する(引数は書かない)
get getTodoById() {
  // ここで function を return する
  return (id: string) => {
    // 普段どおり、取得するデータを return
    return this.todos.find(todo => todo.id === id)
  }
}

Store 全体(モジュールモード)

import { Module, VuexModule } from 'vuex-module-decorators'
import { Todo } from '~/models/Todo'

@Module({ stateFactory: true, namespaced: true, name: 'todos' })
export default class Todos extends VuexModule {
  todos: Array<Todo> = []

  // getter 名はこれまで通り記述する(引数は書かない)
  get getTodoById() {
    // ここで function を return する
    return (id: string) => {
      // 普段どおり、取得するデータを return
      return this.todos.find((todo) => todo.id === id)
    }
  }
}

参考