ログイン情報など、リロードなどをしても永続的にvuexのstoreに値を保持したい時に便利なvuex-persistedstate
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のみ永続的に保存 }) ] });