vuex-persistedstateを使ってみる

Vue.jsでの状態(データ)管理に使用されるVuexですが、ブラウザのリロードなどを行うとデータは消えてしまいます。
リロードを行ってもデータは保持しておきたい案件でvuex-persistedstateを使うことがあったので、使い方をメモしておきます。

サンプルコード

今回の作業環境ですが、以前投稿したVuexの記事と同じ環境を使用しています。
vuex-persistedstateは4.1.0になります。

まず下記コマンドでvuex-persistedstateをインストールします。

npm install --save vuex-persistedstate

あとはプラグインをインポートして、設定を行えばOKです。

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
  plugins: [createPersistedState()],
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
    countUpdate(state, payload) {
      state.count += payload;
    }
  }
})

これでリロードを行ってもVuexのデータが保持されるようになりました。

プラグインの設定時にオプションを設定できるので、いくつか試してみます。
詳しくは公式のドキュメントをご確認ください。

まず、テスト用にmessageという別のデータを追加しておきます。

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
  plugins: [createPersistedState()],
  state: {
    count: 0,
    message: ''
  },
  getters: {
    getCount(state) {
      return state.count;
    },
    getMessage(state) {
      return state.message;
    }
  },
  mutations: {
    countUpdate(state, payload) {
      state.count += payload;
    },
    messageUpdate(state, payload) {
      state.message = payload;
    }
  }
})

vueファイルにmessageの値取得や変更の処理を追加します。

<template>
  <div class="home">
    <p>{{ count }}</p>
    <button @click="buttonEvent">button</button>
    <hr>
    <input type="text" v-model="message">
    <p>{{ getMessage }}</p>
    <button @click="msgEvent">msg</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      message: ''
    }
  },
  computed: {
    count() {
      return this.$store.getters.getCount;
    },
    getMessage() {
      return this.$store.getters.getMessage;
    }
  },
  methods: {
    buttonEvent() {
      this.$store.commit('countUpdate', 1);
    },
    msgEvent() {
      this.$store.commit('messageUpdate', this.message);
    }
  }
}
</script>

これで準備ができたので、オプションを試してみます。

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
  plugins: [createPersistedState({
    key: 'cly7796',
    paths: [
      'count'
    ],
    storage: window.sessionStorage
  })],
  state: {
    count: 0,
    message: ''
  },
  getters: {
    getCount(state) {
      return state.count;
    },
    getMessage(state) {
      return state.message;
    }
  },
  mutations: {
    countUpdate(state, payload) {
      state.count += payload;
    },
    messageUpdate(state, payload) {
      state.message = payload;
    }
  }
})

試した結果は、countはsessionStorageとしてデータが保持され、messageはリロードしてもデータが保持されないようになりました。

今回試したオプションは以下の3つになります。