目次
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 のための集中状態管理
まとめ
今回は、NuxtのgettersやactionsでrootGettersやrootStateへアクセスする方法について纏めました!
VueやNuxtでは、Vue Property DecoratorやNuxt Property DecoratorなどDecoratorを使ってアクセスする方法もありますが、標準で書いているプロジェクトでは今回のような場合もあると思います!
今後、関数ベースのComposition APIが標準で搭載されることもあり、まだまだ推奨の書き方は変わっていきそうですが、しっかりと動向をチェックしていきたいですね!
コメント