1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js/Vuex】Vuexのstoreをモジュール分割した際、gettersに引数を渡す方法

Last updated at Posted at 2020-11-10

##はじめに
私は業務未経験で現在エンジニアを目指して学習中のものです。そのためこちらの記事の信憑性は保証しかねます。
また記事の執筆も初めてですので拙い文章、伝わりづらい表現等あるかと存じますが、ご容赦ください。
##目的
タイトル通りモジュール分割した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件分の投稿を取得しようとしています。)

item.js

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)

こう書くことでうまくいきました!
##まとめ
「もっとこうした方がいい」や「これはこのような理由で動いている」等の指摘をいただけますとありがたいです。
ここまでお付き合いいただきありがとうございました。

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?