NuxtJS – storeのnuxtServerInitアクションの実行

NuxtJS

https:/nuxtjs.org/

最近はフロントエンド開発の技術に触れています。

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されないので動きません。

// store/user.js
export const actions = {
}
// store/user.js
export const actions = {
  nuxtServerInit({ commit }, { req }) {
    if (req.user) {
      commit('login', req.user)
    }
  },
}

正しい書き方

プライマリモジュールからuser namespaceのmutationsを呼びます。グルーバルのnuxtServerInitが呼ばれるので期待どおり動作します。

// store/index.js
export const actions = {
  nuxtServerInit({ commit }, { req }) {
    console.log('nuxtServerInit is called.')
    if (req.user) {
      commit('user/login', req.user)
    }
  },
}

ソースの確認

nuxtのソースを見ると以下のようになっており、グローバルのnuxtServerInitが呼ばれています。

// .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

byebyehaikikyou

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください