Vuex

ゲッター

Scrimba のレッスンを試す

例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。しかし、どちらも理想的とはいえません。

Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。

警告

Vue 3.0 では、ゲッターの結果は算出プロパティのようにキャッシュされません。これは既知の問題で、Vue 3.2 がリリースされる必要があります。詳細は PR #1878 をご確認ください。

ゲッターは第1引数として、state を受け取ります:

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

プロパティスタイルアクセス

ゲッターは store.getters オブジェクトから取り出され、プロパティとしてアクセスすることができます:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

ゲッターは第2引数として他のゲッターを受け取ります:

getters: {
  // ...
  doneTodosCount (state, getters) {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

どのコンポーネントの内部でも簡単にゲッターを利用することができます:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

プロパティとしてアクセスされるゲッターは Vue のリアクティブシステムの一部としてキャッシュされるという点に留意してください。

メソッドスタイルアクセス

関数を返り値にすることで、ゲッターに引数を渡すこともできます。これは特にストアの中の配列を検索する時に役立ちます：

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

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

メソッドによってアクセスされるゲッターは呼び出す度に実行され、その結果はキャッシュされない点に留意してください。

mapGetters ヘルパー

mapGetters ヘルパーはストアのゲッターをローカルの算出プロパティにマッピングさせます:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // ゲッターを、スプレッド演算子（object spread operator）を使って computed に組み込む
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

ゲッターを異なる名前でマッピングさせたいときはオブジェクトを使います:

...mapGetters({
  // `this.doneCount` を `this.$store.getters.doneTodosCount` にマッピングさせる
  doneCount: 'doneTodosCount'
})