Vue.jsの続きです。前回はVuexのミューテーション(mutations)に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。それでは行きましょう!
【目次】
- vuex-persistedstateをインストールする
- Nuxt.jsのモードをSSR→SPAに変更する
- 前回のおさらい(index.js)
- vuex-persistedstateをインポート
- createPersistedState()をストアに設定する
- データがローカルストレージに保存されるか動作確認
- 試しにSSRモードで立ち上げてみる
- 最後に
前回記事
※参考:【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行する - クモのようにコツコツと
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com
vuex-persistedstateをインストールする
「vuex-persistedstate」はVuexのプラグインでVuexのステートの値をローカルストレージに保管する。Vuex本体とは別途でインストールする。
今回も書籍「Vue.js & Nuxt.js超入門」を参考に進める。

- 作者:掌田津耶乃
- 発売日: 2019/02/05
- メディア: 単行本
まずターミナルを立ちげてcd
コマンドでプロジェクトのフォルダに移動する。
cd /(フォルダ)/nuxt_app
次にnpm install
コマンドでプラグインをインストールする。
npm install vuex-persistedstate
vuex-persistedstate@2.7.0
というバージョンがインストールされた。
Nuxt.jsのモードをSSR→SPAに変更する
ローカルストレージはブラウザ(クライアントサイド)の機能のため、Nuxt.jsのモードをSSR(サーバサイドレンダリング)ではなくSPA(シングルページアプリケーション)に変更しないと動かないようだ。変更する。
プロジェクトフォルダの直下にあるnuxt.config.js
というファイルを開く。
export default
中は連想配列でmode
キーがある。
export default { mode: 'universal', //後略 }
値はuniversal
になっている。これはSSR(サーバサイドレンダリング)モードを意味している。
これをspa
に変更する。
export default { mode: 'spa', //後略 }
これでSPA(シングルページアプリケーション)モードになる。
前回のおさらい(index.js)
store
フォルダの中のindex.js
を開く。
JSコード(前回の状態)
import Vuex from 'vuex' const vuexTest = () => { return new Vuex.Store({ state: function() { return { message: 'このアプリを気に入った人の数↓', icon: '👍', counter: 0, }; }, mutations: { count: function(state) { state.counter++; }, reset: function(state) { state.counter = 0; } } }); } export default vuexTest
vuex
をインポート- 関数
vuexTest
の中でストアを設定 state
でメッセージ、アイコン、カウンターの初期値を設定mutations
でカウンターの加算、リセット処理を設定vuexTest
をエクスポート
これが前回の状態。ここにローカルストレージの設定を
vuex-persistedstateをインポート
冒頭にimport
文でcreatePersistedState
オブジェクトを読み込む
import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate";
createPersistedState
はvuex-persistedstate
に用意されているオブジェクト。
createPersistedState()をストアに設定する
関数vuexTest
のストアにcreatePersistedState()
を設定する。
const vuexTest = () => { return new Vuex.Store({ state: function() { //中略 }, mutations: { //中略 }, plugins: [ createPersistedState(), ], }); }
Vuex.Store()
のstate
、mutations
の次にplugins
キーを設定plugins
キーの値は配列で中身はcreatePersistedState()
データがローカルストレージに保存されるか動作確認
上記の設定だけで値がローカルストレージに保存されるらしい。動作確認してみる。
まずnpmプロジェクトを立ち上げる。
npm run dev
前回同様、下層ページ「counter」を開いてみる。
http://localhost:3000/counter
いいね数、初期状態は「0 」
いいねアイコンを何度か押してみる。
リロードしても…
やた!変わらない!
シフトを押しながらいいねするとちゃんと0にリセットする。
デベロッパーツールの「Applicagtion」タブの「LocalStrage」を確認する。
counter
キーに12
という値が保存されている!
試しにSSRモードで立ち上げてみる
SSRモードで本当に動かないか確かめる。
export default { mode: 'universal', //後略
まずnpmプロジェクトを立ち上げる。
npm run dev
下層ページ「counter」を開いてみる。
http://localhost:3000/counter
エラーになった。。
SPモードに戻すと
export default { mode: 'spa', //後略
立ち上がる。
やはりSPAモードじゃないとうまく動かないようだ。
最後に
ということでVuexのプラグインvuex-persistedstateを使ってデータをローカルストレージに保存しました。これでブラウザをリロードしたり閉じたりしてもデータが保持されるようになしました。設定も簡単だったしプラグインの追加の仕方もわかりました。
Nuxt.jsおよびVuexの概要についてはこれで一段落のようです♪ 書籍「Vue.js & Nuxt.js超入門」ではこの後メモアプリを作ったり、AxiosでJSONファイルと連携したりFirebaseでDBと連携したりしていきます。書籍の通りの順番でやってみるか検討していますが、引き続き宜しゅう。それではまた!
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com