qiankun父应用与子应用之间通信

qiankun父应用与子应用之间通信

主应用

在src目录下新增qiankunActions.js
vue3的useStore只能在setup中使用，所以这里如果要存储在store中，可以使用@/store

import{ initGlobalState, MicroAppStateActions }from'qiankun'
import _store from '@/store'
const initialState = {
 //这可以写初始化数据
 backUrl: '/'
}
// 初始化
const actions = initGlobalState(initialState)

actions.onGlobalStateChange((state, prevState)=>{
	_store.commit("setData", state) // 在store存储相关数据
})
export default actions

在入口文件main.js中引入qiankunActions.js

import actions from './qiankunActions.js'
import { registerMicroApps,runAfterFirstMounted,addGlobalUncaughtErrorHandler, start } from 'qiankun';
registerMicroApps( [{
     name: 'uums',
     entry: 'http://localhost:8081/',
     container: '#container', // 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
     activeRule:'uums',
  props: {
	actions,
	message: '主应用'
  }
})

子应用

在src目录下新增qiankunActions.js

function emptyAction() {
	console.warn("Current execute action is empty!");
}
class Actions {
	actions = {
		onGlobalStateChange: emptyAction,
		setGlobalState: emptyAction
	}
	constructor() {}
	setActions(actions) {
		this.actions = actions
	}
	onGlobalStateChange(...args) {
		return this.actions.onGlobalStateChange(...args)
	}
	setGlobalState(...args) {
		return this.actions.setGlobalState(...args)
	}
}
const actions = new Actions()
export default actions

在main.js中引入qiankunActions.js

import actions  from './qiankunActions.js'
// 在render()方法中加入以下代码
if (props.container) {
	actions.setActions(props)
}

通过以下方法获取传递过来的参数

actions.onGlobalStateChange((state)=>{
	console.log(state)
},true)

返回主应用页面地址

// 无跳转重写url
//window.history.pushState(data, title, targetURL);
//@状态对象：传给目标路由的信息,可为空
//@页面标题：目前所有浏览器都不支持,填空字符串即可
//@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
window.history.pushState({
	user: {} // JSON.stringify()字符串
}, '', '/')

注意：这里会有请求的问题，子应用的请求会使用主应用的链接头部，在开发环境下需要在主应用的devServer中配置子应用的转发地址