bnsgt's diary

個人的な備忘と日記

vuex-persistedstateで一部のstateのみ永続的に保存したい場合

ログイン情報など、リロードなどをしても永続的にvuexのstoreに値を保持したい時に便利なvuex-persistedstate

github.com

npmインストールし、

npm install --save vuex-persistedstate

以下のように呼び出すことで利用できる

(/store/index.js)

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    login: {},
    other: {},
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
  plugins: [createPersistedState()]
});

ただし、デフォルトでは、全てのstateを永続的に保存してしまうので、 一部のstateのみ、永続的に保存したい場合は、pathsに明示的に指定する。 そうすると、リロードした場合にその他のstateは初期値に戻る。

(/store/index.js)

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    login: {},
    other: {},
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
  plugins: [
    createPersistedState({
      paths: ['login'] // ← loginのみ永続的に保存
    })
  ]
});