##はじめに
Vue.js 2系でしか使用したことがなく、
Nuxt.jsでは今まで書いていた書き方だとエラーになり・・・
かつ、TypeScriptでの記述例があまりなかったので忘備録として。
見られてまずい個人情報などは、この方法で保存しないように!
##Nuxt.jsでVuexStoreのstateを保存する手順
###① vuex-persistedstateのインストール
npm install --save vuex-persistedstate
###② ~/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 に追記
plugins: [{ src: "~plugins/localStorage", ssr: false }],
##おわりに
Nuxt.jsの練習でTODO LISTを作成していることがバレましたが。
データベースが作れない私でも取り急ぎローカルに保存してTODOリストが作れた