利用想定

NuxtプロジェクトのStoreでgettersを引数付きで使いたかった際に、ググってもあんまり出てこなかったので、記事として残します。

Nuxt以外のVue.jsプロジェクトやクラシックモードでは動作しません。

要所だけみたい方向け

.js


// ストア側のgettersの記述(pokedex.js)
export const getters = {
  getName: state => (index, locale) => {
    return // 処理
  },
};

// gettersを使う側の記述(Component.vue)
this.$store.getters['pokedex/getName'](25, 'jp')

環境

Nuxt 2.14.0　モジュールモードで利用
JavaScript

サンプルコード

情報を保持するストア用のファイル

pokedex.js



/**
 * ポケモン図鑑情報を保持するストア
 */
export const state = () => ({
  pokedex: [], // 図鑑情報
});

export const mutations = {
  updatePokedex (state, newPokedex) {
    state.pokedex = newPokedex;
  },
};

export const actions = {
  createPokedex (ctx, pokedex) {
    ctx.commit('updatePokedex', pokedex);
  },
};

export const getters = {

  // 名前を取得
  getName: state => (index, locale) => {

    const poke = state.pokedex.find((poke) => {
      return poke.index === index;
    });

    return poke ? poke.name[locale] : null;
  },
};

ストアにデータセット、利用するvueコンポーネントファイル

Component.vue

<script>
export default {
  created () {

    // 図鑑情報
    const pokedex = [
      {
        index: 25,
        name: {
          jp: 'ピカチュウ',
          en: 'Pikachu',
        },
      },
      {
        index: 149,
        name: {
          jp: 'カイリュー',
          en: 'Dragonite',
        },
      },
    ];

    // 図鑑情報をセット
    this.$store.dispatch('pokedex/createPokedex', pokedex);

    // 図鑑番号と地域で名前を取得
    console.log(this.$store.getters['pokedex/getName'](25, 'jp')); // ピカチュウ
    console.log(this.$store.getters['pokedex/getName'](149, 'en')); // Dragonite
  }
}
</script>

余談

gettersの使い方の記事のほとんどがサンプルコードに引数ないけど、あんまり使わないのかな。