【Nuxt】gettersやactionsでrootGettersやrootStateなどを使いたい時

gettersやactionsでルートからアクセスしたい

Nuxtをやっていると、gettersやactionsで、ローカルのステートではなく、ルートのステートから呼び出したい時があります。

今回は、そのルートのステートからアクセスする方法を纏めます。

rootGettersやrootStateへアクセスする

gettersでアクセスしたい時

gettersでrootGettersやrootStateへアクセスしたい場合は、以下の順で引数を受け取れば使えます！

store/something.ts

export const getters = {
  getSome(state: State, getters, rootState, rootGetters) {
      ...
  }
};

actionsでアクセスしたい時

actionsでrootGettersやrootStateへアクセスしたい場合は、以下のように{}を使用すると簡単にアクセスできます！

store/something.ts

export const actions = {
  async someAction({ rootGetters } ): Promise<void> {
      ...
  },
};

参考ドキュメント

詳細は公式Vuexのドキュメントが参考になります。

モジュール | Vuex

Vue.js のための集中状態管理

vuex.vuejs.org

まとめ

今回は、NuxtのgettersやactionsでrootGettersやrootStateへアクセスする方法について纏めました！

VueやNuxtでは、Vue Property DecoratorやNuxt Property DecoratorなどDecoratorを使ってアクセスする方法もありますが、標準で書いているプロジェクトでは今回のような場合もあると思います！

今後、関数ベースのComposition APIが標準で搭載されることもあり、まだまだ推奨の書き方は変わっていきそうですが、しっかりと動向をチェックしていきたいですね！