qiankun框架中基于actions机制实现主应用与子应用间的双向通信

2024-04-11 11:28

本文主要是介绍qiankun框架中基于actions机制实现主应用与子应用间的双向通信,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

      • 一、原理
        • 1、setGlobalState:
        • 2、onGlobalStateChange:
        • 3、offGlobalStateChange:
        • 4、图解
      • 二、示例
        • 主应用
          • 1、在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。
          • 2、在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions:
          • 3、主应用中的组件要修改全局状态actions,就在此组件中引入actions实例
        • 子应用
          • 1、在子应用中配置一个空的actions实例为以后重新赋值从主应用中传递过来的actions:
          • 2、然后在mounted的生命周期里注入actions实例:
          • 3、子应用向主应用发送数据(子应用中修改数据,可以在主应用中监听到)
          • 4、子应用在mounted钩子函数中注册qiankun的观察者函数
      • 三、效果图

一、原理

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。

1、setGlobalState:

设置 globalState - 设置新的值时,内部将执行 浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的 观察者 函数。

  • 语法:

setGlobalState: (state) => boolean, //按一级属性设置全局状态,微应用中只能修改已存在的一级属性(就是用来修改全局状态的

2、onGlobalStateChange:

注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。

  • 语法:

onGlobalStateChange: (callback) => void //在当前应用监听全局状态,有变更触发 callback,fireImmediately = true 立即触发 callback

3、offGlobalStateChange:

取消 观察者 函数 - 该实例不再响应 globalState 变化。

  • 语法:

offGlobalStateChange: () => boolean //移除当前应用的状态监听,微应用 umount 时会默认调用

4、图解

在这里插入图片描述

我们从上图可以看出,我们可以先注册 观察者 到观察者池中,然后通过修改 globalState 可以触发所有的观察者函数,从而达到组件间通信的效果。

二、示例

本示例介绍的是子应用中通过路由守卫,把当前的路由面包屑名称传到主应用中,主应用展示面包屑功能。

主应用
1、在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。

actions.js

// 此action文件为定义微应用之间全局状态
// 引入qiankun的应用间通信方法initGlobalStateimport { initGlobalState } from 'qiankun';const initalState = {// 这里可以写初始化数据
}//初始化state
const actions = initGlobalState(initalState)export default actions;
2、在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions:

main.js

import actions from './micro/actions'
// 注册的应用列表
registerMicroApps([{name: 'sub2',//应用名字entry: '//localhost:8082', //子应用的启用地址container: '#app-vue', //子应用所展示的地址 在App.vue中设置id为app-vueactiveRule: '/sub2', //路由地址// 通过props实现通信传递值props: {actions}},{name: 'sub1',//应用名字entry: '//localhost:8081', //子应用的启用地址container: '#app-vue', //子应用所展示的地址 在App.vue中设置id为app-vueactiveRule: '/sub1', //路由地址},
]);
3、主应用中的组件要修改全局状态actions,就在此组件中引入actions实例

app.vue

<template><div id="app"><div class="top"></div><div class="box"><div class="left"><el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"@close="handleClose"><MenuItem :menu-list="menuList"></MenuItem></el-menu></div><div class="right"><div class="bread"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item v-for="(item,index) in crumb" :key="index">{{item.name}}</el-breadcrumb-item></el-breadcrumb></div><div class="main"><router-view></router-view><div id="app-vue"></div></div></div></div></div>
</template><script>
import actions from '@/micro/actions'
export default {components: {MenuItem},name: "App",data() {return {menuList:[],crumb:[]};},
mounted() {//修改全局的actionslet crumb=[]actions.setGlobalState({ crumb })console.log("主应用app的actions:",actions)//主应用监听参数变化,接受参数,展示面包屑功能actions.onGlobalStateChange((state, prevState) => {console.log("主应用app观察者,改变前的state为:", prevState);console.log("主应用app观察者,改变后的state为:", state);if(state?.crumb){this.crumb=state.crumb}else{this.crumb=[]}})}
</script>
子应用

配置子应用的全局状态Actions,子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同,比如主应用中全局状态变量为{token: “main”},则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。

1、在子应用中配置一个空的actions实例为以后重新赋值从主应用中传递过来的actions:

actions.js

function emptyAction() {// 警告:提示当前使用的是空 Actionconsole.warn("Current execute action is empty!");
}class Actions {// 默认值为空 Actionactions = {onGlobalStateChange: emptyAction,setGlobalState: emptyAction};constructor() {}/*** 设置 actions*/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;
2、然后在mounted的生命周期里注入actions实例:

main.js

import actions from './actions'function render(props = {}) {const { container } = props;if(props){actions.setActions(props)}instance = new Vue({router,render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');//主应用中设置的id
}
3、子应用向主应用发送数据(子应用中修改数据,可以在主应用中监听到)

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'import actions from '@/actions'Vue.use(VueRouter)const routes = [{path: "/",redirect: "home"},{path: '/home',name: 'home',component: HomeView,meta:{fullPath:[{name:'首页'}]}},{path: '/about',name: 'about',component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue'),meta:{fullPath:[{name:'首页'},{name:'关于'}]}}
]const router = new VueRouter({mode: 'history',base: window.__POWERED_BY_QIANKUN__ ? '/sub2/' : '/',routes
})// 通过路由守卫,把当前的路由面包屑名称传到主应用中
router.afterEach(to => {console.log("to:", to.meta.fullPath)actions.setGlobalState({ crumb: to.meta.fullPath });
})export default router
4、子应用在mounted钩子函数中注册qiankun的观察者函数

这里也可以监听主应用的参数

mounted(){actions.onGlobalStateChange((state) => {console.log("我是子应用,我检测到数据了:", state);}, true); //onGlobalStateChange的第二个参数设置为true,则会立即触发一次观察者函数}

三、效果图

在这里插入图片描述

在这里插入图片描述

这篇关于qiankun框架中基于actions机制实现主应用与子应用间的双向通信的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/893946

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、