##はじめに
私は業務未経験で現在エンジニアを目指して学習中のものです。そのためこちらの記事の信憑性は保証しかねます。
また記事の執筆も初めてですので拙い文章、伝わりづらい表現等あるかと存じますが、ご容赦ください。
##目的
タイトル通りモジュール分割したstoreのgettersを呼ぶ際に引数を渡したいです。
Nuxtを静的サイトジェネレータとして用いたJAMstackサイトを作成しています。Nuxtですので状態管理にはVuexを使用しているのですが、割と早い段階でファイルを分割したくなりました。
以下公式ガイドやQiita記事を参考に実装しました。
・Vuex公式ガイド
・Vuexでモジュールと処理を細分化する
・[Vuex で modules を利用した際の getters の使い方]
(https://qiita.com/sutoh/items/7e0bd63f9cb47bf48db9)
└── store
├── index.js
└── item.js
全ての投稿をstate
に格納しておりましたがコンポーネントから指定した投稿を取得するような仕組みにしたかったため、getters
に引数を渡して投稿を取得しようとしました。(下記の例では6件分の投稿を取得しようとしています。)
export const getters = {
appearItem: (state) => (contentsIndex) => {
return state.allItem.slice(contentsIndex - 1, contentsIndex + 5)
},
}
##実装
モジュール分割した場合のgettersの呼び出し方は以下のようになります。
this.$store.getters['item/appearItem']
以下のようなやり方ではうまくいきません。
this.$store.getters.item.appearItem
そこで引数を渡す場合
this.$store.getters['item/appearItem(index)']
こうすればうまくいくのではないかと考えましたが、結果はダメでした。
##結論
自分で調べられた範囲内ではピンポイントな答えが見つからなかったため思いついた手段をかたっぱしから試してみたところ
this.$store.getters['item/appearItem'](index)
こう書くことでうまくいきました!
##まとめ
「もっとこうした方がいい」や「これはこのような理由で動いている」等の指摘をいただけますとありがたいです。
ここまでお付き合いいただきありがとうございました。