微前端下如何做多页签缓存

平常在单应用的情况下实现多页签并不难，可以使用vue的keep-alive组件，当在微前端下多个子应用跨应用之间怎么缓存，主要问题是要把数据存储起来，切换应用时调用缓存数据。

1.在基座中创建数据集中管理tabStore.js（存储核心）

主要核心一套数据的增删改查：

export let vnodeStore = []
1. 获取store方法
getStore(){
//返回 vnodeStore 
}
2.设置页面store
setStore(pageInfo){
  //pageInfo页面数据信息
//判断如果pageInfo.key、pageInfo.name、pageInfo.vnode、pageInfo.path都为true的情况下往vnodeStore 中进行push数据
}
3.getVnode(key){
  //传入页面key来获取store中存储的页面信息可用循环遍历取出
}
4.updateVnode({key, path, vnode}){
  //根据key从getVnode中取出存在的数据
//判断如果取到的话更新vnode与path
}
5.clearById(key){
  //根据key从getVnode中取出存在的数据
//判断如果存在可以使用数组的splice方法删除vnodeStore 中存在的数据
}，
6.clearAll(){
//此方法删除vnodeStore 中的数据即可
}

2.基于keep-alive组件实现一个缓存组件

props: {
  tabStore: {
  type: Object,
  defalut: null
}
}
render(){
  let vnode = this.$slots.default ? this.$slots.default[0] : null //获取keep-alive默认插槽中的内容
//如果vnode为true 取出vnode.key
//获取当前路由信息
//使用vnode.key与路由拼成一个唯一key
if(vnode.key.indexOf(routerKey) === -1){
  vnode.key =  vnode.key + routerKey
}
使用当前路由path调用getVnode(path)获取页面信息
let pageInfo = this.tabStore.getVnode(this.$route.path)
if(pageInfo){
  //如果存在缓存证明已经被缓存过了直接渲染
      if(vnode.key===pageInfo.vnode.key){
        vnode.componentInstance = pageInfo.vone.componentInstance;
     }else{
       this.tabStore.updateVnode(  //如果pageInfo存在且不是当前key，需要更新缓存
                {
                  key:xxx，
                  path: xxx..,
                  vnode
                }
           )
    }
  }else{
      tish.tabStore.setStore(  //不存在pageInfo的情况下缓存页面
               {
                  key:xxx，
                  path: xxx..,
                  vnode
                }
        )
   }
 return vnode
}

3.在页面中调用

<keep-alive :store="store"> //此处的store需要全子应用共享才可以做到统一
  <router-view/>
</keep-alive>

4.在布局中加入页签展示位置

//数据来源为全局store
<tab v-for="storeData" @click="handleClick(item)"></tab>
data(){
  return{
  storeData: []
    }
}
created:{
  onStoreChange(){  //使用bus监听store数据变化更改页签展示
      this.storeData = xxx
  }
},
methods:{
  handleClick(item){
    window.hash = item.url  //用于点击页签路由跳转
  }
}