微前端qiankun进阶使用：应用间通信

master主应用相关目录

├── src 
│ ├── micro                        # 存放微前端所需文件
│   │── actions.js              # 官方通信方案：全局状态数据
│   │── app.js                  # 子应用配置
│   │── childEmit.js            # 子应用触发主应用的函数
│   │── index.js                # 启动文件
│   │── jsLibrary.js            # 公共方法库,用于下发子应用
│   └── uiLibrary.js            # 公共组件库,用于下发子应用
│ ├── store                        
│   │── modules             
│       │── pagers.js            # 应用间通信的数据仓库
│   │── getters.js             
│   │── index.js                # store主文件

store中用pagers.js 文件里存放应用间通信的数据仓库

主应用->子应用通信：通过props参数传递

• 主应用通过props参数下发数据
• 子应用在bootstrap和mount生命周期中接收数据

主应用下发数据

micro/app.js中

/**
 * auth：pantt
 * time：2022.06.15
 * des：配置需要下发的子应用及其相关信息
 */
import store from '@/store'

const arr = window.origin.split(':')
const origin = arr[0] + ':' + arr[1]

const ENV = process.env.NODE_ENV
/**
 * 主应用公共资源下发子应用
 */
// 导入主应用ui库
import LibraryUi from './uiLibrary'
// 导入主应用工具类库
import LibraryJs from './jsLibrary'
// 导入主应用需要下发的emit函数
import * as childEmit from './childEmit'

// 注意：必须用方法获取，直接取store为undefined
export function getApps() {
   
  // 配置要下发的数据
  const msg = {
   
    data: store.getters, // 从主应用仓库读出的数据
    components: LibraryUi, // 从主应用读出的组件库
    utils: LibraryJs, // 从主应用读出的工具类库
    emitFnc: childEmit // 从主应用下发emit函数来收集子应用反馈
    // pager, // 从主应用下发应用间通信呼机
  }
  return [
    /**
     * name: 微应用名称 - 具有唯一性
     * entry: 微应用入口 - 通过该地址加载微应用,本地与服服务器配置有区别
     * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
     * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
     * props: 主应用下发给子应用传递数据
     */
    {
   
      name: 'netmoni_child1',
      entry:
        origin + (ENV === 'development' ? ':31325' : '/child/netmoni_child1/'),
      container: '#child1_frame',
      activeRule: '/sub/child1',
      props: {
    ...msg } // 下发子应用的信息
    },
  ]
}

store/getters.js

const getters = {
   
  device: state => state.app.device,
  token: state => state.user.token,
  name: state => state.user.name,
  childData: state => state.pagers.childData,
  initialState: state => state.pagers.initialState // qiankun官方通信actions数据
}
export default getters

micro/jsLibrary.js中

/**
 * auth：pantt
 * time：2022.06.15
 * des：公共方法库,用于下发子应用
 */

import request from '@/utils/request'// 统一下发公共的axios封装请求
import * as validate from '@/utils/validate'

const _exports = {
    request, ...validate }

export default _exports

micro/uiLibrary.js中

/**
 * auth：pantt
 * time：2022.06.15
 * des：公共组件库,用于下发子应用
 */

import ZdEmpty from '@/components/Empty/index.vue'

ZdEmpty.install = function (Vue) {
  Vue.component('ZdEmpty', ZdEmpty)
}
const install = function (Vue) {
  Vue.component('ZdEmpty', ZdEmpty)
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  ZdEmpty
}

子应用接收数据

main.js中

/**
 * bootstrap 只会在微