vue-vuex缓存

2019-10-18  本文已影响0人  Biao_349d

缓存vuex数据并加密。

/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-19 11:44:09
 * @LastEditTime: 2019-10-16 19:35:51
 * @LastEditors: Please set LastEditors
 */
import Vue from 'vue'
import Vuex from 'vuex'
import MainStore from '@_src/pages/main/store/index'
import LoginStore from '@_src/pages/login/store/index'
import createPersistedState from 'vuex-persistedstate'
import { Base64 } from 'js-base64'
const global = {
  namespaced: true,
  state: Gstate,
  mutations: Gmutations,
  actions: Gactions,
  getters: Ggetters
}
// 自定义vuex插件(没有用到)
const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    console.log('state', state)
  })
}
const store = {
  init(Vue, Vuex) {
    Vue.use(Vuex)

    return new Vuex.Store({
      modules: {
        global,
        index: indexStore,
        main: MainStore,
        login: LoginStore
      },
      plugins: [
        myPlugin,
        createPersistedState({
          storage: {
            getItem: key => Base64.decode(window.sessionStorage.getItem(key)),
            setItem: (key, value) =>
              window.sessionStorage.setItem(key, Base64.encode(value)),
            removeItem: key => window.sessionStorage.removeItem(key)
          },
          // storage: window.sessionStorage,
          reducer(val) {
            // console.log('createPersistedState------><><><><', val)
            return {
              // 只储存state中的user,不把page放在这里面
              // user: userStore
              global: val.global,
              index: {
                curApp: val.index.curApp,
                curPermission: val.index.curPermission,
                curPermissionResourceType: val.index.curPermissionResourceType,
                curResourceType: val.index.curResourceType
              },
              login: {
                userInfo: val.login.userInfo
              }
            }
          }
        })
      ]
    })
  }
}

const initStore = store.init(Vue, Vuex)
// 使用这种动态注册的方式有问题,
// initStore.registerModule('index', {
//   ...indexStore,
//   plugins: [myPlugin]
// })

export default initStore
上一篇下一篇

猜你喜欢

热点阅读