Vuex数据持久化

vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态等等，如果我们希望能够固定化到本地，减少无用的接口访问，可以通过vuex-persistedstate。

vuex-persistedstate使用

npm install vuex-persistedstate --save

store配置

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import createPersistedState from "vuex-persistedstate";


Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: '',
  },
  mutations: {},
  actions: {},
  modules: {
    login,
  },
  plugins: [createPersistedState()]  //默认存储到localStorage
});

export default store;

存储到sessionStorage

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import createPersistedState from "vuex-persistedstate";


Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: '',
  },
  mutations: {},
  actions: {},
  modules: {
    login,
  },
  plugins: [createPersistedState({storage:window.sessionStorage})] //存储到sessionStorage
});

export default store;

指定需要持久化的数据

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import createPersistedState from "vuex-persistedstate";


Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: '',
  },
  mutations: {},
  actions: {},
  modules: {
    login,
  },
  plugins: [createPersistedState({
  			storage:window.sessionStorage,
  			reducer(val){
  				return {
  					//之存储state中的userInfo
  					userInfo:val.userInfo
  				}
  			}
  })] //存储到sessionStorage
});

export default store;

使用cookie

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import createPersistedState from "vuex-persistedstate";
import * as Cookies from 'js-cookie'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: '',
  },
  mutations: {},
  actions: {},
  modules: {
    login,
  },
  plugins: [
	 createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ] 
});

export default store;

vuex提示的插件

import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import createPersistedState from "vuex-persistedstate";
import createLogger from "vuex/dist/logger";

const debug = process.env.NODE_ENV !== "production"; 

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userInfo: '',
  },
  mutations: {},
  actions: {},
  modules: {
    login,
  },
  plugins: debug?[createLogger(),createPersistedState()]:[createPersistedState()]  
});

export default store;