qiankun父应用与子应用之间通信
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中配置子应用的转发地址
更多推荐
已为社区贡献1条内容
所有评论(0)