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