0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-14

##はじめに
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リストが作れた:clap_tone4:

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?