vuexのデータを自動でローカルストレージに保存する設定(vuex-persistedstate)

投稿者: | 2019年3月24日

vue.jsを使って会員向けのWebサービスの構築を始めました。カツオです。

開発中に以下の問題にぶつかり、色々と解決方法を検索したところVue.jsならではの便利なモジュールを見つけましたのでご紹介します。Vuexを使っている方なら若干のソースコードを追加するだけで実現可能です。

解決したい課題

  • 会員向けのデータをVuexで集約管理しているのだが、ページを再読み込みするとVuexのデータがクリアされる
  • (それによって)ソースを修正するたびにページがリロードされてしまい、データが消える。頭から処理をしないと開発・テストが進められない。。
  • 特に、認証情報をVuexで管理しておりリロードするたびに再ログインしないといけないのが辛い

対処の方向性

  • Vuex上のデータをクライアント上に保存しておき、リロードの際はクライアントデータを取得することでページを復活させられないか?

 

で色々と検索したところ、「ローカルストレージ」というものが使えそうなことがわかりました。

ローカルストレージって何?

  • クライアントのブラウザ上にデータを保存する仕組み
  • 永続に保存される
  • Webサービスからでもデータアクセス(保存、参照)可能

 

なるほど。便利そうです。であれば、VuexのJSからローカルストレージにアクセスして必要な情報だけローカルストレージに保存しておく仕組みを作っておけばいいのかなぁ?と考え行動しそうになったのですが、ちょっと待てと。「Vuex ローカルストレージ」で検索してみました。すると、超便利なモジュールがやはり見つかりました笑。Vue.jsはここがいいですよね。

Vuexのローカルストレージへの保存を勝手にやってくれるモジュール「vuex-persistedstate」

使ってみた感じ、以下を勝手にやってくれてます。

  • Vuexに突っ込んだデータのローカルストレージへの保存
  • ページリロードや再度アクセスした際にローカルストレージからデータを取得してきて、Vuexの復元
  • (これによって)ページリロード時に再ログインさせる必要がなくなり、めっちゃ開発効率化しました!

 

vuex-persistedstateの導入

vuex-persistedstateの導入はめっちゃ簡単。設定レベルでできます。

①インストール

npm install --save vuex-persistedstate

②設定追加

私の場合はこんな感じでVuexはモジュール化しています。モジュールのファイル(modules/user.js)には設定不要です。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import {user} from './modules/user'

// ★追加
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  },
  plugins: [createPersistedState()] // ★追加 
})

 

以上、設定終わりです。これ以上に特別な設定は必要ありませんでした。便利過ぎて驚きです。

ローカルストレージの確認方法(Chrome)

  • F12でデベロッパーツール起動
  • Applicationタブを選択
  • 左メニューのStorage>LocalStorageの「▼」を押して、対象のドメインを表示。
  • ドメインをクリック

こちらで確認できます!!

さいごに

めっちゃ便利。目から鱗レベルです。次回からは毎回インストールしてから開発やるようにしたい。


カツオが開発したWebサービスです。

「セールサーチ」ネットショップのセール情報の検索サイト!

平成の想い出を気軽に年表にしてシェアすることができるサービスです。ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です