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を参照することが可能となります。