Vuexのゲッターについて

Vue.jsには算出プロパティがありますが、Vuexではそれと同じことをgettersを用いて行います。
設定方法は以下のようにgettersの中に好きなgetterを追加していきます。

state: {
  hoge: 10
}
getters: {
  aaa: aaa(state) {
    return state.hoge
  }
}

getterは必ず第一引数がstateになります。
コンポーネント側でhogeの値10を使いたい場合、コンポーネント側でgettersを呼び出せば使えます。
呼び出し方は冗長ですが、以下のように書きます。

this.$store.getters.aaa // 短く書く方法もあるのでそれは後ほど説明します

ちなみにgetterはアロー関数を使えば以下のように短く書けるのでこっちのほうが良いです。

state: {
  hoge: 10
}
getters: {
  aaa: state => state.hoge
}

getterの中で他のgetterを呼び出したいときもあると思いますので、その場合は第二引数にgettersを渡して、以下のように使います。

state: {
  hoge: 10,
  huga: 100,
}
getters: {
  aaa: state => state.hoge,
  bbb: (state, getters) => getters.aaa + state.huga // getters.aaaでhogeの値を取得 -> hugaの値と足す -> getters.bbbは110になる
}

繰り返しになりますが呼び出し方は以下です。

this.$store.getters.bbb

ここまで、getterの第一引数にstate、第二引数にgettersを渡すことでストアオブジェクトの状態（stateオブジェクトの中身のこと）を参照できました。
この方法をプロパティアクセススタイルといいます。
さらに、ストアオブジェクトの状態を参照するもうひとつの方法があります。
その方法をメソッドアクセススタイルといいます。

メソッドアクセススタイルでは引数を渡すことができます。これはプロパティアクセススタイルではできません。
以下に両者の違いを書きます。

aaa: state => state.hoge, // プロパティアクセススタイル: getters.aaaでhogeの値を取得
zzz: (state, getters) => num => getters.aaa + num // メソッドアクセススタイル: getters.aaaでhogeの値を取得 + 引数numを足す

呼び出し方は以下です。

this.$store.getters.zzz(500) // 引数が渡せる

ここまでgetterを呼び出す２つの方法について説明しました。
最後にgetterを短い記述で呼び出す仕組みを説明します。

コンポーネント側で短い記述で呼び出す仕組みをmapGettersヘルパーといいます。
これを使うと以下のように省略して書くことができます。 コンポーネント側で、算出プロパティにmapStateヘルパーを設定します。

// コンポーネント側
computed: {
  ...mapGetters(["aaa", "bbb"]),
  computed01() {...},
  computed02() {...}
}

そうするとコンポーネント側でgetterを呼び出したいときはこれくらい短く書けます。

this.aaa // プロパティアクセススタイル
this.zzz(500) // メソッドアクセススタイル

次はミューテーションについてまとめたいと思います。
ここまで読んでいただいてありがとうございました！！

参考資料
ゲッター | Vuex