nuxt.jsを使う時にlocalStorageでstoreを永続化する

nuxt.jsで再読込しても入力中の内容を保持したい

という動機から、状態をlocalstorageに保存することにしました。
日本語での知見はあまりなかったので、投稿しておきます。

localstorageに保存が可能になるとどうなる？

• 再読込しても、storeの状態を保つことができます。
• 入力中のフォームの内容や、画面の状態を復元することができます。
• store中のstateはlocalstorageを消し去らないと新しい値とかを追加しても状態が変わらなくなってしまいます。

vuex-persistedstateを使う

Reduxでも経験がありますが、こういうときにはstoreが変わった瞬間に自動的に保存してくれて、ページが始まった瞬間に復元してくれる、ライブラリを用いるべきです。
探した結果、最終的にnuxt.jsのissueなどで見ることの多かった"vuex-persistedstate"を使うことにしました。
結局このライブラリが一番、vuexでlocalstorageなどの永続化をするときに人気のライブラリのようです。

npm install -S vuex-persistedstate

使い方、一通りググりながら試行錯誤した結果、やり方はいくつか有るようですが、下の記事に紹介されているコードに落ち着きました。
https://github.com/nuxt/nuxt.js/issues/972#issuecomment-332308183

plugins/persistedstate.js

import createPersistedState from "vuex-persistedstate";

export default ({store, isHMR}) => {
  // In case of HMR, mutation occurs before nuxReady, so previously saved state
  // gets replaced with original state received from server. So, we've to skip HMR.
  // Also nuxtReady event fires for HMR as well, which results multiple registration of
  // vuex-persistedstate plugin
  if (isHMR) return;

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      createPersistedState()(store); // vuex plugins can be connected to store, even after creation
    });
  }
};

nuxt.config.js

...

  plugins: [
    { src: "~plugins/persistedstate.js", ssr: false }
  ]
}

一応、完コピのようで、isClient isServerという変数がduplicateになったとエラーが出ていたので、そこだけ修正しています。

簡単なアプリでデータベースに保存するまでもないなというときに

アプリの状態を手軽に保存したい時、よくlocalstorageを使いますがnuxt.jsでも使っていけそうだと思いました。
これだとクライアントをまたいだデータの引き継ぎとかはできませんので、使用する機会は考える必要がありそうですが、結構良い選択肢ではあると思います。

Nuxtの利点であるSSRもできるという点とは相性が悪い

SSR実行時のnodeにはlocalstorageがありませんから、window.localstorageはさわれません。
そのため、今回のプラグインも{... , ssr; false}として、SSR時は起動しないようにする必要があります。