vuexで管理しているデータをCookieに保存して簡単には消えないようにする #Vue.js

※この記事は5分で書きました && 読めます

筆者、Nuxtでグローバルなstate管理にvuexを用いていました。
ログイン情報やユーザー情報をvuexに保存していたのですが、vuexは標準でリロードすると消えてしまうので
なんとかブラウザに残したいところでした。

リサーチしてみると、

・サーバーサイドでセッションを持ってクライアントからリクエストを送りそれを参照する
・（外部プラグイン、モジュールを追加するなどして）vuexのデータを保持する

のふたつに分けられるようで後者の場合
・セッションストレージ
・local storage
・Cookie
が選択肢としてありました。

「サーバーサイドでセッションを持ってクライアントからリクエストを送りそれを参照する」について

筆者のケースですが、プロダクトの開発初期でサーバーサイドをプロジェクト分けて開発するのが面倒だったのでNuxt内でフルスタックで開発しています。
どちらにせよBFF（SSR）は持つ予定だったので、一時的にフロントで持つべきでない処理も全て書いています。
つまり、のちのちサーバーサイドは移行する予定で書いています。移行タイミングはかなり不明確です。

設計的にセッションをフロントとバックでどちらで持たせるべきかなど悩んでいましたが、上記事情とフロントでログイン状態を扱うほうが良さそうな気がしたことから一旦この選択肢は捨てました。

vuexのデータを保持する

調べるとvuex-persistedstateを導入する記事が多く目にあたると思います。
英語で「vuex cookie」など検索してもこれが上位に出てきます。

永続化はしたくなくセッションではユーザー体験悪いので、
Cookieだなと決断しましてvuex-persistedstateをyarn add、nuxt.config.jsのmodulesへの追加と公式サンプルのCookie x Universalの例を参考にしてplugins/persistedState.jsを追加します。
pathsのところはvuexのstateに

hoge.js

export const state () => ({
  hoge: '',
  hogehoge: '',
});

など書いていればstore.hogehogeなどでアクセスできると思うので配列に突っ込みます。
keyは'hage'など指定してあげます。Cookieで保存したりsetItemでアクセスする際に用いられるkeyです。

そうすると自分の環境ではうまくいったように感じたのですがしばらくたって確かめてみるとgettersでアクセスできなくなっていました。
調べるとこの記事がありました。
https://noumisoblog.com/vuex-persistedstate-nuxt/#toc4
これで解決できる方もいるかもしれませんが、バリデーション後にaxiosを発火してvuexに保存している自分のケースでは解決できませんでした。

結論

js-cookieを使いましょう。vuexの記述にgetやsetなどをよしなに追加するだけです。
上で挙げた公式サンプルのCookie x Universalの例を見るとわかりますがクライアントだけでcookieを扱う分には特にvuex-persistedstateを使う理由も無いのかと。

これで落ち着いてクッキーを食べられますね。
余談ですが5分で書きましたは嘘でした。