【Vuex/Store】gettersとmapGettersの使い方 / index.js以外の呼び出し方.

gettersとmapGettersの利用方法を解説していきます。

Q. gettersの利用目的とは

gettersはなぜ利用するのでしょうか。

Storeで状態をもつ変数としてstateがあります。stateにアクセスすればgettersを必ずしも利用する必要はありません。ただし、gettersを利用するべきシチュエーションがあります。

それは、stateの値を基に他のデータへと処理したい場合です。

例えば、stateに配列データを含んで、gettersでは条件を基に配列をフィルター処理してデータ提供したい場合などです。

公式サイトの説明でも紹介されています。

Q. gettersの記述方法

gettersのStore内での記述方法

ここでは、簡単な処理にします。　stateのidを＋1するgettersを記述します。

export const state = () => ({
  id: 0,
  })
  
  export const getters = {
    idplus(state) { // satateを引数に持つ
      return state.id + 1 // gettersの処理
    },
  }

Q. gettersの呼び出し方法

A. index.js に記述されているsotre -> gettersの場合

    <div>
      {{ $store.getters.idplus }}
    </div>

A. index.js 以外記述されているsotre -> gettersの場合　

ここでは、store/me.js に記述されているstoreとします。

    <div>
      {{ $store.getters['me/idplus'] }}
    </div>

Q. mapGettersの目的

gettersを呼び出す際に、記述が冗長になりがちです。
各Vueファイル上で、gettersを繰り返す呼び出す場合やコード記述量を減らしたい場合に利用します。

Q. mapGettersの記述方法

gettersを記述していれば、呼び出せます。 mapGettersのための記述は必要ありません。

Q. mapGettersの呼び出し方法

Vueファイル script内にて

import { mapGetters } from 'vuex'

A. index.js に記述されているsotre -> gettersの場合

  computed: {
    ...mapGetters({ idplus:  'idplus', // idplusで命名
    })
  },

A. index.js に記述されているsotre -> gettersの場合

ここでは、store/me.js に記述されているstoreとします。

  computed: {
    ...mapGetters({ idplus:  'me/idplus', // idplusで命名
    })
  },

idplusで命名しているので、下記で呼び出します。

    <div>
      {{ idplus }}
    </div>