Nuxt.jsにてplugins/localStorageにVuexStoterを保存する方法

はじめに

Vue.js 2系でしか使用したことがなく、
Nuxt.jsでは今まで書いていた書き方だとエラーになり・・・
かつ、TypeScriptでの記述例があまりなかったので忘備録として。
見られてまずい個人情報などは、この方法で保存しないように！

Nuxt.jsでVuexStoreのstateを保存する手順

① vuex-persistedstateのインストール

npm install --save vuex-persistedstate

②　~/plugins/localStorage.ts に記述

~/plugins/localStorage.ts

import createPersistedState from "vuex-persistedstate";

export default ({ store }: any) => {
  createPersistedState({
    key: "vuex",
    //pathsの中身は、保存したいstateを記述
    paths: ["todo.todoList"],
    //保存先
    storage: window.localStorage,
  })(store);
};

paths:

保存したいstateを指定するところ

"storeモジュール名.保存するstate変数名" の形式で記載。
複数ある場合は、
"storeモジュール名.保存するstate変数名","storeモジュール名.保存するstate変数名" でOK

storage:

保存先を指定するとことろ
今回は、localStorageを使用。※下記表参照
下記以外にもCookieにも保存ができるそう？だけど私は使わないで省略。

ストレージ	storageの値	保存期間
ローカル ストレージ	window.localStorage	意図的に消さない限り 保存され続ける
セッション ストレージ	window.sessionStorage	ブラウザを閉じたり セッションが切れたた消える

③ nuxt.config.js に追記

~/nuxt.config.js

plugins: [{ src: "~plugins/localStorage", ssr: false }],

おわりに

Nuxt.jsの練習でTODO LISTを作成していることがバレましたが。
データベースが作れない私でも取り急ぎローカルに保存してTODOリストが作れた