详解vuex持久化插件解决浏览器刷新数据消失问题

npm install --save vuex-solidification

import Vue from 'vue'
import Vuex from 'vuex'
import count from './count/index.js';
import createPersistedState from 'vuex-solidification';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: {
      value: 0,
      num: 1
    },
    pos: 1
  }
  plugins: [ // 默认存储所有state数据到localstorage
    createPersistedState()
  ]
});

createPersistedState({
  local: {
    include: ['count.value'] 
  }
})
/* 
  hook钩子触发之后，localstorage里面存储的对象为:
  {
    count: {
      value: 0,
    }
  }
*/


createPersistedState({
  local: {
    exclude: ['count.value'] 
  }
})
/* 
  hook钩子触发之后，localstorage里面存储的对象为:
  {
    count: {
      num: 1
    },
    pos: 1
  }
*/


createPersistedState({
  session: {
    include: ['count.value'] 
  }
})
/* 
  hook钩子触发之后，sessionstorage里面存储的对象为:
  {
    count: {
      value: 0,
    }
  }
*/


createPersistedState({
  session: {
    exclude: ['count.value'] 
  }
})
/* 
  hook钩子触发之后，sessionstorage里面存储的对象为:
  {
    count: {
      num: 1
    },
    pos: 1
  }
*/

createPersistedState({
  session: {
    include: ['count'] 
  },
  local: {
    include: ['pos']
  }
})
/* 
  hook钩子触发之后，
  sessionstorage里面存储的对象为:
  {
    count: {
      value: 0,
      num: 1
    },
  }
  sessionstorage里面存储的对象为:
  {
    pos: 0
  }
*/