nuxtServerInitを利用して、vuex-persistedstateの情報をCookieの値で更新する
はじめに
ローカルストレージはクライアントサイドのデータです。ページ更新時(F5)には内容が失われます。なのでvuex-persistedstateを利用している場合、NuxtでSSRしようとすると、保持しているデータが消失します。こればかりはブラウザの仕様なのでどうにもなりません。
しかし、Nuxtを利用する最大のメリットはSSRですから、これをオフ(ssr: false)にするのはナンセンスです。そこでSSRしていてもvuex-persistedstateのデータにアクセスできるよう、ページ更新時にはCookieからローカルストレージにデータをコピーするようにします。
実装
データのコピーにはnuxtServerInitを利用します。
こちらのhookはSSRが行われる際のコールバック関数です。なのでサーバ上で動作します。このタイミングでCookieの情報をvuex(ローカルストレージ上)に落とし込むことができれば、ページの更新時にもデータを参照できます。
実装に差し当たっては、前提条件としてREADMEのCustomize Storageを利用します。
上記のコードによってvuex-persistedstateをCookieと同期させた上で、nuxtServerInitにより、SSR時にもCookieからローカルストレージに対して、データがコピーされるように処理を追加します。
コードはstore/action.jsに記載します。
これでページ更新時にも、vuex-persistedstateでstateを参照することが可能となります。