Nuxt + TypeScriptで、Vuexを永続化する

概要

Vuexのデータは、永続化対応をしないとページ更新などをするとデータがなくなってしまう。そのため、「vuex-persistedstate」を使用して永続化の対応をする。
Nuxt + TypeScriptで、Vuexを扱う方法はこちら

環境

名称	Version
Node	14.10.1
Nuxt	2.14.5
Vue	2.6.12
TypeScript	3.9.7
Vuetify	2.3.10
nuxt-property-decorator	2.8.8
vuex-module-decorators	1.0.1
vuex-persistedstate	4.0.0-beta.1

手順

npmのインストール

npm i vuex-persistedstate

ファイルの作成

~/plugins/localStorage.ts

import { Context } from "@nuxt/types";
import createPersistedState from "vuex-persistedstate";

export default ({ store }: Context) => {
  createPersistedState({
    paths: [
      "client.test"
    ]
  })(store)
}

nuxt.config.tsにファイルの読み込みを追加

  plugins: [
    { src: '~/plugins/localStorage.ts', mode: 'client' }
  ]