LoginSignup
14
7

More than 3 years have passed since last update.

gettersで引数を使う書き方(Nuxt 2.x.x モジュールモード)

Posted at

利用想定

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

Nuxt以外のVue.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の使い方の記事のほとんどがサンプルコードに引数ないけど、あんまり使わないのかな。

14
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
7