美文网首页
vue-vuex缓存

vue-vuex缓存

作者: Biao_349d | 来源:发表于2019-10-18 20:17 被阅读0次

    缓存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
    

    相关文章

      网友评论

          本文标题:vue-vuex缓存

          本文链接:https://www.haomeiwen.com/subject/wmuwmctx.html