【Nuxt.js v2】storeを永続化する（vuex-persistedstate）

インストール

npm install vuex-persistedstate

実装

plugins/persistedstate.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: '任意の名前'
  })(store)
}

key名はブラウザのローカルストレージに保存する際に使われる。他のアプリと名前がかぶると上書きしたりされたりするため、まあ被らないと思える名前を設定する。

nuxt.config.js

export default {
  plugins: [
    // サーバーサイドでは使用できないのでssrはfalseにすること
    { src: '~/plugins/persistedstate.js', ssr: false}
  ]
}

使い方

あとは普通にstoreのstateに保持したい値をセットするだけ。
画面遷移やリロード時に、自動でローカルストレージに保存したstoreの情報からstateの値を復元してくれる。