美文网首页
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缓存

    缓存vuex数据并加密。

  • vue-vuex

    事件总线 Vue.prototype.bus = new Vue()console.log(this.bus)子组...

  • vue-vuex

    欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 描述 本文档...

  • Vue-vueX(十一)

    1、什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所...

  • VUE-VUEX的使用

    安装vuex 在store.js页面引入 定义数据 暴露 vuex 实例化 组件内使用 注册 获取state里面的...

  • vue-vuex简单介绍

    vuex的应用场景,就是多个组件之间相互传值 创建项目选择router和vuex 打开src/store/inde...

  • (Vue全家桶)Vue-vuex

    vuex入门 vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共...

  • vue-vuex与react redux 比较

    vuex store的目录结构 模块结构 辅助映射函数 mapState, mapGetters, mapM...

  • 静态缓存和动态缓存(基于thinkphp测试)

    动态缓存 静态缓存有 浏览器缓存 磁盘缓存 内存缓存 CDN(分布式缓存) Nginx反向代理缓存

  • 缓存那些事(二)什么是缓存以及缓存的作用

    缓存那些事(一)概述 缓存那些事(二)什么是缓存以及缓存的作用 缓存那些事(三)如何构建缓存 缓存那些事(四)缓存...

网友评论

      本文标题:vue-vuex缓存

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