getter

Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them:

store の state から引き出された state に対して「compute: 算出」の処理をしたい場合があります。例えば、アイテムリストをフィルタリングしたり、アイテムの数を数えて、それを使いたい場合です。

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

If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal.

複数のコンポーネントがこの関数を使用する場合には、この関数を何度も複製しなくてはいけません。もしくは、helper 関数として切り出して、使用する複数の場所で import しなくてはいけません。どちらの方法も、理想的とはいえません。

Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

Vuex は "getter" を store 作成時に定義することができます。これはいわば store のための computed property といえます。computed properties と同様に、getter の結果は、その依存関係とともにキャッシュされているので、依存している値が変更された時にだけ、値が再評価されます。(訳注: 詳しくはこちらを参照https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods)

Getters will receive the state as their 1st argument:

Getter は第一因数として state を受け取ります。

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

Property-Style Access

Property 形式の値へのアクセス

The getters will be exposed on the store.getters object, and you access values as properties:

getter は store.getters という形でアクセスできるオブジェクトとして露出しており(訳注: コンポーネントの中で store.getters という形でアクセスできる状態になっているということ) 、各値は、プロパティにアクセする方法と同じ形で参照できます。

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

Getters will also receive other getters as the 2nd argument:

getter は、他の getter を第二引数として受け取ることもできます。

etters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

We can now easily make use of it inside any component:

コンポーネントの中であればどこでも、これを簡単に使用できます。

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

Note that getters accessed as properties are cached as part of Vue's reactivity system.

Note: プロパティ形式でアクセスされた Getter は、Vue の reactivity system の一部分としてキャッシュされています。

You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:

Getter に引数を渡すこともできます。その場合は、関数を返すようにしてください。これが特に便利なのは、store にもたせた配列を検索する場合です。

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

Note that getters accessed via methods will run each time you call them, and the result is not cached.

method の形でアクセスされる getter は、呼び出すたびに実行され、キャッシュされない点に留意してください。

The mapGetters Helper

The mapGetters helper simply maps store getters to local computed properties:

mapGetters というヘルパー関数は、store の getters をローカルの computed property に map させることができます。

import { mapGetters } from 'vuex'

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

If you want to map a getter to a different name, use an object:

getter の名前とは異なる名前で map させたい場合には、object を使って指定してください。

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