qiankun 子应用怎样通过 props拿到子应用【注册之后挂载之前】主应用中发生变更的数据

场景描述:子应用需要在接口调用和页面渲染时,需要用到主应用登录之后拿到的用户数据
逻辑前提:
1、主应用在 main.js中通过 registerMicroApps注册了子应用
2、主应用登录之后将用户数据传递给子应用

>> 原先的做法(有问题)

【具体参考 qiankun #initGlobalState】这个数据传递的方法是没有问题的,只是不满足当前的场景
1、主应用在注册子应用时,在子应用的生命周期钩子afterMount方法中通过setGlobalState方法将用户数据传递出去

// main.js
registerMicroApps([{name: 'custproApp',entry: '/MicroCustpro/',container: '#appContainer',activeRule: 'app-custpro',},],{afterMount: [(app) => {// eslint-disable-next-lineconsole.log(`[base-app]: catch [${app.name}] afterMount`)qiankunActions.setGlobalState({userInfo: store.getters.userInfo})}],}
)

2、子应用在导出的生命周期钩子mount方法中通过onGlobalStateChange方法监听主应用的数据传递,从而拿到用户数据

// main.js
export async function mount (props) {console.log('[app-cust] vue app mounted, props from main framework', props)render(props)// 主应用通信props.onGlobalStateChange((state) => {const { userInfo = {} } = state// 用户信息保存if (userInfo) store.dispatch('initUserInfo', { ...userInfo })console.log('[app-cust]: catch [base-app] state')})
}

【问题现象】:主应用登录之后加载子应用,子应用加载之后最初调用的几个接口中并没有带上用户数据,页面渲染出来更早一点的部分也出现没有拿到用户数据的情况

【原因分析】:主应用在子应用 afterMount 加载完之后才传递的数据,子应用 mount 加载之后最初调用的接口,以及靠前一点的部分页面渲染,可能比子应用监测到主应用传递的数据更早发生

>> 修改后的做法

1、主应用在注册子应用时,在props中通过函数的方式返回主应用存储在全局状态 (vuex等)中的用户数据

// main.js
registerMicroApps([{name: 'custproApp',entry: '/MicroCustpro/',container: '#appContainer',activeRule: 'app-custpro',props: getUserInfo () => ({ userInfo: store.getters.userInfo })},]
)

2、子应用在导出的生命周期钩子mount方法中通过props从主应用的全局状态中取到用户数据

// main.js
export async function mount (props) {console.log('[app-cust] vue app mounted, props from main framework', props)if (props.getUserInfo) {// 用户信息保存const { userInfo } = props.getUserInfo()if (userInfo) store.dispatch('initUserInfo', { ...userInfo })console.log('---user---', userInfo.userName, userInfo.userId)}render(props)
}

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

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

相关文章

Hooks 进阶:自定义 Hook 的设计与实践

引言 React Hooks 已成为现代 React 开发的核心范式,而自定义 Hook 则为我们提供了强大的代码复用机制。 自定义 Hook 的基础原理 自定义 Hook 本质上是一种函数复用机制,它允许我们将组件逻辑提取到可重用的函数中。与传统的高阶组件(HOC)和 render …

锂电电动扭剪扳手市场报告:现状、趋势与竞争格局深度解析

一、锂电电动扭剪扳手市场概述 锂电电动扭剪扳手作为建筑施工、钢结构安装等领域的关键工具,凭借其便携性、高效性及环保特性,正逐步替代传统手动及气动工具。该设备通过锂电池供电,结合智能扭矩控制技术,可精准完成高强度螺栓的…

[面试精选] 0076. 最小覆盖子串

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 76. 最小覆盖子串 - 力扣(LeetCode) 2. 题目描述 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字…

rabbitmq的高级特性

一.发送者的可靠性 1.生产者重试机制 修改publisher模块的application.yaml文件 spring:rabbitmq:connection-timeout: 1s # 设置MQ的连接超时时间template:retry:enabled: true # 开启超时重试机制initial-interval: 1000ms # 失败后的初始等待时间multiplier: 1 # 失败后下…

北京大学肖臻老师《区块链技术与应用》公开课:02-BTC-密码学原理

文章目录 1.比特币中用到的密码学的功能2. hash3. 签名 1.比特币中用到的密码学的功能 比特币中用到密码学中两个功能: hash、 签名。 2. hash hash函数的三个特性:抗碰撞性(Collision Resistance)、隐蔽性(Hiding&…

Spring Cloud Gateway高并发限流——基于Redis实现方案解析

本文是一个基于 Spring Cloud Gateway 的分布式限流方案,使用Redis Lua实现高并发场景下的精准流量控制。该方案支持动态配置、多维度限流(API路径/IP/用户),并包含完整的代码实现和性能优化建议。 一、架构设计 #mermaid-svg-vg…

SpringAI--RAG知识库

SpringAI–RAG知识库 RAG概念 什么是RAG? RAG(Retrieval-Augmented Genreation,检索增强生成)是一种结合信息检索技术和AI内容生成的混合架构,可以解决大模型的知识时效性限制和幻觉问题。 RAG在大语言模型生成回答之前,会先从…

【PhysUnits】14 二进制数的标准化表示(standardization.rs)

一、源码 这段代码主要用于处理二进制数的标准化表示。它定义了两个特质(trait) IfB0 和 IfB1&#xff0c;以及它们的实现&#xff0c;用于处理二进制数的前导零及前导一的简化。 use super::basic::{B0, B1, Z0, N1, Integer, NonZero, NonNegOne};/// 处理 B0<H> 类型…

将 ubutun 的网络模式 从NAT 改到 桥接模式后,无法上网,linux 没有IP地址 的解决方案

首先要将 ubutun 的网络模式设置为桥接模式 这里再从 NAT 模式改动成 桥接模式的时候&#xff0c;还出现了一个问题。改成桥接模式后&#xff0c;linux没有ip地址了。原因是 不知道什么时候 将 虚拟网络编辑器 中的值改动了 要选择这个 自动 选项

多模态大语言模型arxiv论文略读(九十)

Hybrid RAG-empowered Multi-modal LLM for Secure Data Management in Internet of Medical Things: A Diffusion-based Contract Approach ➡️ 论文标题&#xff1a;Hybrid RAG-empowered Multi-modal LLM for Secure Data Management in Internet of Medical Things: A Di…

电脑主板VGA长亮白灯

电脑主板VGA长亮白灯 起因解决方法注意事项&#xff1a; 起因 搬家没有拆机整机在车上晃荡导致显卡松动接触不良&#xff08;一般VGA长亮白灯都和显卡有关&#xff0c;主要排查显卡&#xff09; 解决方法 将显卡拆下重新安装即可 注意事项&#xff1a; 不可直接拔下显卡&a…

【监控】pushgateway中间服务组件

Pushgateway 是 Prometheus 生态中的一个中间服务组件&#xff0c;以独立工具形式存在&#xff0c;主要用于解决 Prometheus 无法直接获取监控指标的场景&#xff0c;弥补其定时拉取&#xff08;pull&#xff09;模式的不足。 其用途如下&#xff1a; 突破网络限制&#xff1…

打造AI智能旅行规划器:基于LLM和Crew AI的Agent实践

引言 今天来学习大佬开发的一个AI驱动的旅行规划应用程序&#xff0c;它能够自动处理旅行规划的复杂性——寻jni找航班、预订酒店以及优化行程。传统上&#xff0c;这个过程需要手动搜索多个平台&#xff0c;常常导致决策效率低下。 通过利用**代理型人工智能&#xff08;Age…

21. 自动化测试框架开发之Excel配置文件的测试用例改造

21. 自动化测试框架开发之Excel配置文件的测试用例改造 一、测试框架核心架构 1.1 组件依赖关系 # 核心库依赖 import unittest # 单元测试框架 import paramunittest # 参数化测试扩展 from chap3.po import * # 页面对象模型 from file_reader import E…

如何在电力系统中配置和管理SNTP时间同步?

在电力系统中配置和管理 SNTP 时间同步需结合行业标准&#xff08;如《DL/T 1100.1-2019》&#xff09;和分层架构特点&#xff0c;确保安全性、可靠性和精度适配。以下是具体操作指南&#xff0c;涵盖架构设计、设备配置、安全管理、运维监控四大核心环节&#xff0c;并附典型…

MTK-关于HW WCN的知识讲解

前言: 最近做项目过程中和硬件打交道比较多,现在关于整理下硬件的HW wcn的知识点 一 MTK常见的MT6631 Wi-Fi 2.4GHz 匹配调谐指南 ‌拓扑结构选择‌ 推荐采用并联电容拓扑(‌shunt cap topology‌)代替并联电感拓扑(‌shunt inductor topology‌),以减少潜在电路设计…

(1)课堂 1--5,这五节主要讲解 mysql 的概念,定义,下载安装与卸载

&#xff08;1&#xff09;谢谢老师&#xff1a; &#xff08;2&#xff09;安装 mysql &#xff1a; &#xff08;3&#xff09;镜像下载 &#xff0c;这个网址很好 &#xff1a; &#xff08;4&#xff09; 另一个虚拟机的是 zhang 123456 &#xff1a; 接着配置…

U-Boot ARMv8 平台异常处理机制解析

入口点&#xff1a;arch/arm/cpu/armv8/start.S 1. 判断是否定义了钩子&#xff0c;如有则执行&#xff0c;否则往下走。执行save_boot_params&#xff0c;本质就是保存一些寄存器的值。 2. 对齐修复位置无关码的偏移 假设U-Boot链接时基址为0x10000&#xff0c;但实际加载到0…

mysql安装教程--笔记

一、Windows 系统安装 方法1&#xff1a;使用 MySQL Installer&#xff08;推荐&#xff09; 1. 下载安装包 访问 MySQL 官网下载页面&#xff0c;选择 MySQL Installer for Windows。 2. 运行安装程序 双击下载的 .msi 文件&#xff0c;选择安装类型&#xff1a; ◦ Developer…

投资策略规划最优决策分析

目录 一、投资策略规划问题详细 二、存在最优投资策略&#xff1a;每年都将所有钱投入到单一投资产品中 &#xff08;一&#xff09;状态转移方程 &#xff08;二&#xff09;初始条件与最优策略 &#xff08;三&#xff09;证明最优策略总是将所有钱投入到单一投资产品中…