最近はフロントエンド開発の技術に触れています。
NuxtJSのSSRモードで、storeのnuxtServerInitアクションの実行について勘違いしてしまっていた。事象は、ログインセッションがあるのにログインされていないと判断されログインページに飛んでしまうというもの。nuxtServerInitアクションが実行されていない？となり改めてドキュメントを見ると、nuxtServerInitアクションはプライマリモジュールのみが受けとると書いてあった（ちゃんと読めですね。。）
Only the primary module (in
store/index.js) will receive this action. You’ll need to chain your module actions from there.– https://nuxtjs.org/docs/2.x/directory-structure/store
複数のstoreモジュールでのnuxtServerInitの実行
間違いの書き方
以下の例では、サブモジュールでnuxtServerInitを実行しようとしています。しかし、dispatchされないので動きません。
|
1 2 3 |
// store/user.js export const actions = { } |
|
1 2 3 4 5 6 7 8 |
// store/user.js export const actions = { nuxtServerInit({ commit }, { req }) { if (req.user) { commit('login', req.user) } }, } |
正しい書き方
プライマリモジュールからuser namespaceのmutationsを呼びます。グルーバルのnuxtServerInitが呼ばれるので期待どおり動作します。
|
1 2 3 4 5 6 7 8 9 |
// store/index.js export const actions = { nuxtServerInit({ commit }, { req }) { console.log('nuxtServerInit is called.') if (req.user) { commit('user/login', req.user) } }, } |
ソースの確認
nuxtのソースを見ると以下のようになっており、グローバルのnuxtServerInitが呼ばれています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// .nuxt/server.js抜粋 (ver 2.14.16) /* ** Dispatch store nuxtServerInit */ if (store._actions && store._actions.nuxtServerInit) { try { await store.dispatch('nuxtServerInit', app.context) } catch (err) { console.debug('Error occurred when calling nuxtServerInit: ', err.message) throw err } } |
まとめ
- nuxtServerInitアクションは、プライマリモジュールで指定する。
- チェーンする場合は、プライマリモジュールから呼び出す。
参考リンク
- https://nuxtjs.org/docs/2.x/directory-structure/store
- https://qiita.com/erukiti/items/75792f5fd4d993de3f2f
コメント