> For the complete documentation index, see [llms.txt](https://super-yusuke.gitbook.io/udemy-vue-basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://super-yusuke.gitbook.io/udemy-vue-basic/vuex-de-state-wosuru/core-concepts/getter.md).

# 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: 算出」の処理をしたい場合があります。例えば、アイテムリストをフィルタリングしたり、アイテムの数を数えて、それを使いたい場合です。

```javascript
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 を受け取ります。

```javascript
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 という形でアクセスできる状態になっているということ) 、各値は、プロパティにアクセする方法と同じ形で参照できます。

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

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

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

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

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

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

```javascript
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 にもたせた配列を検索する場合です。

```javascript
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 させることができます。

```javascript
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 を使って指定してください。&#x20;

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