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

Nuxt

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

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

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

rootGettersやrootStateへアクセスする

gettersでアクセスしたい時

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

store/something.ts

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

actionsでアクセスしたい時

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

store/something.ts

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

参考ドキュメント

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

モジュール | Vuex
Vue.js のための集中状態管理

まとめ

今回は、NuxtのgettersactionsrootGettersrootStateへアクセスする方法について纏めました!

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

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

オススメの関連商品

Note一覧

コメント