クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【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超入門

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"; 

createPersistedStatevuex-persistedstateに用意されているオブジェクト。

createPersistedState()をストアに設定する

関数vuexTestのストアにcreatePersistedState()を設定する。

const vuexTest = () => {
    return new Vuex.Store({
        state: function() {
            //中略
        },
        mutations: {
            //中略
        },
        plugins: [
            createPersistedState(),
        ],
    });
}
  • Vuex.Store()statemutationsの次にpluginsキーを設定
  • pluginsキーの値は配列で中身はcreatePersistedState()

データがローカルストレージに保存されるか動作確認

上記の設定だけで値がローカルストレージに保存されるらしい。動作確認してみる。

まずnpmプロジェクトを立ち上げる。

npm run dev

前回同様、下層ページ「counter」を開いてみる。

http://localhost:3000/counter

いいね数、初期状態は「0 」 f:id:idr_zz:20200107154535p:plain

いいねアイコンを何度か押してみる。 f:id:idr_zz:20200107154616p:plain

リロードしても… f:id:idr_zz:20200107154616p:plain やた!変わらない!

シフトを押しながらいいねするとちゃんと0にリセットする。 f:id:idr_zz:20200107154535p:plain

デベロッパーツールの「Applicagtion」タブの「LocalStrage」を確認する。 f:id:idr_zz:20200107154930p:plain counterキーに12という値が保存されている!

試しにSSRモードで立ち上げてみる

SSRモードで本当に動かないか確かめる。

export default {
  mode: 'universal',
  //後略

まずnpmプロジェクトを立ち上げる。

npm run dev

下層ページ「counter」を開いてみる。

http://localhost:3000/counter

エラーになった。。 f:id:idr_zz:20200107155654p:plain

SPモードに戻すと

export default {
  mode: 'spa',
  //後略

立ち上がる。 f:id:idr_zz:20200107154616p:plain

やはりSPAモードじゃないとうまく動かないようだ。

最後に

ということでVuexのプラグインvuex-persistedstateを使ってデータをローカルストレージに保存しました。これでブラウザをリロードしたり閉じたりしてもデータが保持されるようになしました。設定も簡単だったしプラグインの追加の仕方もわかりました。

Nuxt.jsおよびVuexの概要についてはこれで一段落のようです♪ 書籍「Vue.js & Nuxt.js超入門」ではこの後メモアプリを作ったり、AxiosでJSONファイルと連携したりFirebaseでDBと連携したりしていきます。書籍の通りの順番でやってみるか検討していますが、引き続き宜しゅう。それではまた!


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