qiankun 应用之间数据传递

qiankun 应用之间数据传递

全局共享 initGlobalState

qiankun initGlobalState API 单击前往

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。这几个方法其实看一下他们的英文就大概知道所对应做的事情了,下面直接通过一个案例演示一下

主应用注册

改造一下主应用的入口文件,下面是新加的和全局状态共享相关的。这里初始化了一个状态数据,并且将值给设置了,同时调用了监听改变,当值被改变后会触发对应回调。

补充这一段代码可以抽离为一个单独的文件(就像vue3当中单独写一个store一样,然后导出这个action),然后在你的主应用页面代码当中导入之后去通过setGlobalState改变值也是一样的(haha,这样就是在vue或者jsx当中用的咯,别突然被我这个写在入口当中的困住了)

import {registerMicroApps, start, initGlobalState} from 'qiankun';// 全局状态管理
const state = {count: 1};const action = initGlobalState(state);action.onGlobalStateChange((value, prev) => {console.log('main app change', value, prev);
});action.setGlobalState(state);

子应用获取

这里以vue3作为子应用来进行说明,同样的是对入口文件进行改造,在子应用接入qiankun的时候,我们要将对应的生命周期写上。在mount注册的时候会有一个props参数,在这个props当中就有我们所需要的全局共享对象。

let app: any;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {createApp(App).use(router).use(ElementPlus).mount('#app');
} else {renderWithQiankun({mount(props) {app = createApp(App).use(router).use(ElementPlus);app.mount(props.container?.querySelector('#app'));console.log('vue app mount get props', props);props.onGlobalStateChange((state: any, prev: any) => console.log(`vue 子应用 [onGlobalStateChange - ${props.name}]:`, state, prev));props.setGlobalState({count: 100});},// bootstrap、update、unmount三个生命周期省略。。。。});
}
优化

在子应用当中我们也可以把这个action单独抽离出来封装一下

function emptyAction() {// 警告:提示当前使用的是空 Actionconsole.warn("Current execute action is empty!");
}class Actions {// 默认值为空 Actionactions = {onGlobalStateChange: emptyAction,setGlobalState: emptyAction};/*** 设置 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;

然后还是在入口文件的mount生命周期当中把props的action赋值给我们包的这个actions,也就是下面这样,然后再在其他地方用的时候导入这个actions就好了

import actions from './action.js';
actions.setActions(props);

在这里插入图片描述

观察者模式 & 发布订阅

js设计模式-观察者&发布订阅 单击前往

可以利用观察者模式或者发布订阅将数据给绑定在windows下,然后进行对应的监听处理

Props传值

在主应用当中注册子应用的时候可以通过props来进行值传递

registerMicroApps([{name: 'react app', // app name registeredentry: '//localhost:7100',container: '#yourContainer',activeRule: '/yourActiveRule',// 通过这个将myData传递,子应用在mount中可以拿到这个prop里面的值props: myData}
]);

骚操作

localStorage

反正不管什么都往这里面塞,要拿的时候再从这里面拿

window

把要传的值挂载到window全局上,要拿的时候来window上拿

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小巧设计,强大功能:探索SoC模块的多样化功能

LoRa-STM32WLE5模块基于ST的STM32WLE5芯片,采用LoRa调制,适用于超远程和超低功耗无线电解决方案。搭载高性能Arm Cortex-M4核心,频率高达48 MHz,支持256 KB闪存和64 KB运行内存,具备安全性增强功能。广泛应用于安防、智…

C++进阶之路:日期类的实现、const成员(类与对象_中篇)

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

ue5 扇形射线检测和鼠标拖拽物体

这里的NumTrace是要发射几根射线,Degrees Per Trace是每根射线之间的角度, 例如 要在角色面前实现一个180度的扇形射线检测,就需这两个变量乘起来等于180 TraceLength是射线的长度 下面是鼠标拖动物体逻辑,很简单 这里的Floor和…

文心快码 - Baidu Comate 让AI帮你提高生产力|AI代码助理

码随心动,快人一步,更懂你的智能代码助手 基于文心大模型,结合百度编程大数据,为你生成优质编程代码。文心快码 - Baidu Comate,更懂你的AI编程伙伴,研发效率提升好帮手。 一、更懂研发知识 开发速度快 构…

提示词高级阶段学习day3.1

第三个类型就是让模型做信息的转化 最直观的例子就是翻译 去翻译英文,它的效果都非常好 除此之外,给大家举一个让大模型翻译代码的例子, 还有就是让大模型写代码的 这是一个数据分析场景,其实数据分析场景一直追求的就是一个…

LeetCode 精选 75 回顾

目录 一、数组 / 字符串 1.交替合并字符串 (简单) 2.字符串的最大公因子 (简单) 3.拥有最多糖果的孩子(简单) 4.种花问题(简单) 5.反转字符串中的元音字母(简单&a…

企业级调度器 LVS

集群和分布式基础知识 系统性能的扩展方式 当一个系统,或一个服务的请求量达到一定的数量级的时候,运行该服务的服务器的性能和资源上限, 很容易成为其性能瓶颈。除了性能问题之外,如果只部署在单台服务器上,在此服务…

iOS Swift逆向——deMangle过程中的偏移计算

碰到好多函数最开始都会调用这个函数&#xff0c;xref了一下&#xff0c;发现有上万个xref。 __int64 __fastcall sub_1000B6ED0(__int64 *a1) {__int64 result; // x0result *a1;if ( result < 0 ){result swift_getTypeByMangledNameInContext((char *)a1 (int)result…

Hyper-V安装使用教程

操作系统&#xff1a;Windows Server 2019 Datacenter 1.安装Hyper-V (1)控制面板 > 程序 > 启用或关闭 Windows 功能 (2)勾选Hyper-V > 安装重启 2.Hyper-V管理器 (1)连接到服务器 > 本地计算机 (2)虚拟交换机管理器 > 新建虚拟网络交换机 > 外部 > 创…

Spark的安装配置及集群搭建

Spark的本地安装配置&#xff1a; 我们用scala语言编写和操作spark&#xff0c;所以先要完成scala的环境配置 1、先完成Scala的环境搭建 下载Scala插件&#xff0c;创建一个Maven项目&#xff0c;导入Scala依赖和插件 scala依赖 <dependency><groupId>org.scal…

国家唯一认证的防脱发产品,双11速速囤

脱发的一定都深刻知道掉发严重反复折磨的痛苦&#xff01;为了能早点调理好掉发严重的问题&#xff0c;真的买了一堆育发液&#xff0c;也是踩了不少雷&#xff0c;今天就把用过好用的分享出来&#xff0c;有需要的趁着双十一赶紧囤点~ 一、露卡菲娅防脱精华液&#xff1a;科技…

【硬盘知识】记一次买 希捷 二手 清零盘 的经历(怎么检测硬盘的好坏、健康程度)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

信息搜集 ---开发框架识别

开发框架识别 插件推荐 插件商店搜索wappalyzer Python - Django&Flask Django 1、wappalyzer插件 2、返回数据包的特征字段 Set-Cookie:expires Flask 1、wappalyzer插件 2、返回数据包的特征字段 Set-Cookie:expires 或 Etag: "flask PHP - ThinkPHP&Lar…

光纤光学——弱导光纤与线偏振模

一、基本思想 弱导光纤&#xff1a;n1≈ n2 , k0n1 ≈ k0n2&#xff0c;亦即&#xff1a; k0n1 ≈ k0 n2 ≈ 光线与纤轴的夹角小&#xff1b;芯区对光场的限制较弱&#xff1b; 消逝场在包层中延伸较远。 弱导光纤场的特点&#xff1a; HEι1,m模式与EHι-1,m色散曲线相近…

Vivado - Aurora 8B/10B IP

目录 1. 简介 2. 设计调试 2.1 Physical Layer 2.2 Link Layer 2.3 Receiver 2.4 IP 接口 2.5 调试过程 2.5.1 Block Design 2.5.2 释放 gt_reset 2.5.3 观察数据 3. 实用技巧 3.1 GT 坐标与布局 3.1.1 选择器件并进行RTL分析 3.1.2 进入平面设计 3.1.3 收发器布…

R语言机器学习算法实战系列(六)K-邻近算法 (K-Nearest Neighbors)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍教程下载数据加载R包导入数据数据预处理数据描述数据切割调节参数构建模型预测测试数据评估模型模型准确性混淆矩阵模型评估指标ROC CurvePRC Curve保存模型总结优点:缺点:系统信…

Gin框架操作指南01:开山篇

Gin是目前最流行&#xff0c;性能最好的的GoWeb框架&#xff0c;几乎成为了学习GoWeb必备的知识。本人最近也在学Gin&#xff0c;在b站搜了很多教程&#xff0c;发现有的教程不够详细&#xff0c;有的教程工具包安装有问题&#xff0c;而官方文档的很多示例代码又不全&#xff…

deepin V23 部署Ollama

系统&#xff1a;Deepin V23 1.Ollama简单介绍 Ollama是一个开源的大语言模型本地部署工具&#xff0c;通过它可以方便的在本机部署开源大模型。 Ollama仓库地址&#xff1a;https://github.com/ollama/ollama Ollama官方下载地址&#xff1a;https://…

多个NVR同时管理EasyNVR多品牌NVR管理工具/设备助力KTV视频监控建设

随着娱乐产业的蓬勃发展&#xff0c;KTV作为一种集唱歌、聚会、休闲于一体的娱乐场所&#xff0c;深受大众喜爱。然而&#xff0c;随着人流量的增加和夜间营业的特性&#xff0c;KTV的安全问题也日益凸显。在这样的背景下&#xff0c;NVR监测软件/设备EasyNVR的引入不仅成为了一…

HCIP——以太网交换安全(四)DHCP Snooping

目录 一、DHCP Snooping的知识点 二、DHCP Snooping实验拓扑 三、总结 一、DHCP Snooping的知识点 1.1、DHCP snooping 概述&#xff1a; ①DHCP Snooping使能DHCP的一种安全特性&#xff0c;用于保证DHCP客户端从合法的DHCP服务端获取IP地址。DHCP服务器记录DHCP客户端IP…