【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する

Vue.jsの続きです。前回はVuexのミューテーション（mutations）に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。それでは行きましょう！

【目次】

前回記事
※参考：【Vue.js】Vuexのミューテーション（mutations）に設定した処理を実行する - クモのようにコツコツと

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com

vuex-persistedstateをインストールする

「vuex-persistedstate」はVuexのプラグインでVuexのステートの値をローカルストレージに保管する。Vuex本体とは別途でインストールする。

今回も書籍「Vue.js & Nuxt.js超入門」を参考に進める。

Vue.js & Nuxt.js超入門

まずターミナルを立ちげて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