vuex-persistedstateによるstateデータの永続化

BoskampiによるPixabayからの画像 NuxtJS
BoskampiによるPixabayからの画像
この記事は約3分で読めます。

NuxtJSのSSRモードで、vuex-persistedstateによるデータ永続化を適用してしまいSSRのfetchライフサイクルでstoreに設定したデータが上書きされてしまった。これは、私がvuex-persistedstateの使用方法を誤っただけである。SSRモードで動かす場合は、クライアントサイドで永続化したいpathにのみ適用すべし(自分への戒め)。

stateが上書きされてしまったケース

具体的には以下のような使い方をしてしまっていた。

  1. vuex-persistedstateをpluginとしてロード
  2. クライアントサイドでstoreにデータ書き込み(この段階でlocalStorageにデータが書かれている)
  3. SSRでサーバサイドでfetch処理でstateにデータを書き込む

期待する動きは、3で初回ページアクセスしてサーバサイドでcommitしたstateがクライアントサイドで復元される、である。

しかし、3番目のステップでSSRで設定したstateデータがクライアントサイドで復元されると期待するものの、vuex-persistedstateプラグインの永続化処理により、以前にlocalStorageに書き込んだ値で上書きされてしまう、という訳である

プラグインロードのタイミング

NuxtJSでは以下のようにpluginとして組み込める。クライアント再度でpluginがロードされるタイミングは、ライフサイクルでは以下となる。

  • Receives the HTML
  • Loading assets (e.g. JavaScript)
  • client-side Nuxt plugin ★ここ
    • in order as defined in nuxt.config.js
  • Vue Hydration
  • Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
  • asyncData (blocking)
  • beforeCreate (Vue lifecycle method)
  • created (Vue lifecycle method)
  • The new fetch (top to bottom, siblings = parallel) (non-blocking)
  • beforeMount (Vue lifecycle method)
  • mounted (Vue lifecycle method)

引用:https://nuxtjs.org/docs/concepts/nuxt-lifecycle/

Stateのrestoreのタイミング

サーバーサイドでcommitされたstateの情報は、ページアクセスのレスポンスデータの中でシリアライズされて送信される。そして、アプリケーション初期化のタイミングでstateに復元される。

store.replaceStateの復元段階では、まだプラグインの初期化はされていない。プラグインの初期化が呼ばれるのは、コメント // Plugin executionの以降になるので、上記で復元されたstateは上書きされてしまう。

参考リンク

コメント

タイトルとURLをコピーしました