vuex-persistedstateを使ってみる

2022.06.27

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

サンプルコード

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

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

1
npm install --save vuex-persistedstate

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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という別のデータを追加しておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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の値取得や変更の処理を追加します。

1
2
3
4
5
6
7
8
9
10
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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つになります。

key localStorageやsessionStorageとして保存する際のkey値。
デフォルトはvuex。
paths 保存するstateのデータを指定。
デフォルトはundefined。
storage 保存方法の指定。
デフォルトはlocalStorage。

参考サイト

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930