Nuxt.js fetchでmapGettersの値を参照するには？

Question

前提・実現したいこと

以下のようなソースを記述していますが
うまくmapGettersの値を参照することができません。

fetchでstoreのhoge/hogeを実行するために
パラメータを設定しています。
hage/nani のtestのitemと言う項目を初期設定したいのですが
参照することができません。

発生している問題・エラーメッセージ

  async fetch ({ store, error, query, route, from ,app})
  {
    try {
      await store.dispatch('hoge/hage', this.test.item)
    }
    catch(e) {
      error({ statusCode: 500 });
    }
  },

  computed: {
    ...mapGetters('hage/nani', ['test'])
  },

補足情報（FW/ツールのバージョンなど）

Answer 1

fetchやasyncDataはインスタンス生成前に動作するためページコンポーネントのthisにアクセスすることができません。
そのためmapGettersを始めとするmap系の値にはアクセスできなくなるのでコンテキストのストアから参照する必要があります。

store.getters['hoge/nani']
store.getters['hoge/nani'](value) // 引数を取る場合

Comments

[ms5025]

ありがとうございます！
確かに公式ドキュメントに、fetchではthisでページのコンポーネントには
アクセスできない、とありました。

ただ
store.getters['hoge/nani'].test
store.getters('hage/nani').test
store.getters('hage/nani')

をfetch内でコンソールログで見てみても、undefined で値が取れません・・・
なぜでしょうか？

[nt4c]

申し訳ありません、少し記述を誤っていたので回答を修正しました。
gettersの関数は「ストア名/関数名」となっているのでブラケット記法でアクセスしてください。
引数を取る場合も追記しておきました。

[ms5025]

store.getters['hoge/nani/test'].item
で取得できました！
store.getters['hoge/nani'].test.item
なのだとずっと思っていました。
やっと値が取得できました。
ありがとうございます！！