刷新不清除状态管理、刷新不清楚指定数据的状态管理

刷新不清除所有状态管理器:

下载依赖:vuex-persistedstate

复制代码
mport Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import user from './modules/user';
import permission from './modules/permission';
import filterbox from './modules/filterbox';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  plugins: [createPersistedState()],
  getters,
  state: {
    maptype: '2d',
  },
  modules: {
    user,
    permission,
    filterbox
  }
});

export default store;
复制代码

刷新不清除指定状态管理器:

复制代码
import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import user from './modules/user';
import permission from './modules/permission';
import filterbox from './modules/filterbox';
import videoList from './modules/videoList';
import conponentAttrConfig from './modules/componentAttrConfig';
import CreatePersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const state = {
  maptype: '2d' 
}

// 需要持久化的数据放到reducer里
const vuexPersisted = new CreatePersistedState({
  key: 'VuexPersisted',
  storage: window.sessionStorage,
  reducer(val) {
    return {
      maptype: val.maptype,
      permission: {
        addRoutes: val.permission.addRoutes
      }, 
      user: {
        change: val.user.change,
        isHome: val.user.isHome,
        treeInfo: val.user.treeInfo,
        sidebarMenuList: val.user.sidebarMenuList
      }  
    }
  } 
})

const store = new Vuex.Store({
  modules: {
    user,
    permission,
    videoList,
    filterbox,
    conponentAttrConfig
  },
  state,
  getters,
  plugins: [vuexPersisted]
});

export default store;
复制代码

 

posted @   菜鸟小何  阅读(259)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
历史上的今天:
2019-08-18 随机数的获取
2019-08-18 定位法
2019-08-18 利用自身的浮动布局
2019-08-18 flex弹性盒子布局
2019-08-18 双飞翼布局
2019-08-18 圣杯布局
点击右上角即可分享
微信分享提示