微前端micro-app 子应用 调用父应用方法

参考:micro-app官方文档

场景描述

父应用存储一套vuex数据,其中包含登录信息token等,登录信息透传给子应用使用。
当子应用中的接口返回“登录失效”时,需要清空父应用vuex中的登录相关信息,并且跳转到登录页面。

原本vuex中有一个名为 LogOut 的action(如下),正常情况直接通过this.$store.dispatch("LogOut") 触发即可。

	...// 退出系统LogOut({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {commit('SET_TOKEN', '')commit('SET_ROLES', [])commit('SET_PERMISSIONS', [])removeToken()resolve()}).catch(error => {reject(error)})})},....

但是微前端改造之后,子应用自身没有 vuex 的实例,最后考虑通过 子应用向主应用发送数据 的方式实现功能,原理:

解决办法

  1. 触发条件下,子应用通过 dispatch 向 父应用传递参数:
// 子应用 window.microApp.dispatch 传值
...
window.microApp.dispatch({type: 'callLogOut'})
...
  1. 父应用 通过 绑定监听函数 addDataListener 监听子应用传递的数据
// 父应用监听数据变化
...
microApp.addDataListener(appName, handlerFun);
...
发现问题:父应用只能监听到一次数据变化

上述代码写好之后,项目运行,发现父应用只能监听到一次数据变化,之后再次触发该特定场景,父组件始终无法监听到数据变化,即使子应用明明触发的 dispatch

经仔细查阅 父子应用传值文档,发现:

dispatch只接受对象作为参数,它发送的数据都会被缓存下来。 micro-app会遍历新旧值中的每个key判断值是否有变化,如果所有数据都相同则不会发送(注意:只会遍历第一层key),如果数据有变化则将新旧值进行合并后发送。

例如:

// 第一次发送数据,记入缓存值 {name: 'jack'},然后发送 
window.microApp.dispatch({name: 'jack'})
// 第二次发送数据,将新旧值合并为 {name: 'jack', age: 20},记入缓存值,然后发送 
window.microApp.dispatch({age: 20})
// 第三次发送数据,新旧值合并为 {name: 'jack', age: 20},与缓存值相同,不再发送
window.microApp.dispatch({age: 20})

dispatch是异步执行的,多个dispatch会在下一帧合并为一次执行

window.microApp.dispatch({name: 'jack'})
window.microApp.dispatch({age: 20})// 上面的数据会在下一帧合并为对象{name: 'jack', age: 20}一次性发送给主应用

解决方法

那么,有没有什么办法,不缓存参数,做到每次场景触发,子应用给父应用传值,父应用都能及时监听到并触发对应操作呢

有,那就是 forceDispatch:强制发送

forceDispatch方法拥有和dispatch一样的参数和行为,唯一不同的是forceDispatch会强制发送数据,无论数据是否变化。

示例:

// 强制发送数据,无论缓存中是否已经存在 name: 'jack' 的值
window.microApp.forceDispatch({name: 'jack'}, () => {console.log('数据已经发送完成')
})

最终代码

// 子应用
...// 重新登录window.microApp.forceDispatch({type: 'callLogOut'})
...// 父应用
...mounted() {// 父应用中监听子应用触发的自定义事件microApp.addDataListener('app-deploy', this.subListener)},beforeDestroy() {// 移除监听microApp.removeDataListener('app-deploy', this.subListener)},methods: {subListener(data) {// 登录过期,跳转首页并退出登录if (data?.type === 'callLogOut') {this.$store.dispatch('LogOut').then(() => {location.href = '/index'})}},...}
...

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

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

相关文章

网站建设企业网站优化

近年来,随着互联网的迅速发展,企业网站已经成为了企业展示自我形象与实力的重要载体之一。然而,单单拥有一个美观、简洁的企业网站并不能让企业在竞争激烈的市场中脱颖而出。因此,在建设企业网站的过程中,我们需要将企…

【前端】对象的常用处理函数(深浅拷贝)

前言 浅拷贝会创建一个新对象,但只复制了原始对象的第一层属性,而不是递归地复制整个对象的所有嵌套属性。因此,新对象中的嵌套对象仍然是原始对象中嵌套对象的引用。这意味着修改新对象中的嵌套对象会影响原始对象中的相应嵌套对象 深拷贝…

C++常用的输入输出方法(ACM模式)

文章目录 前言一、输入输出方法1、cin2、getline()3、getchar() 二、算法案例1、一维数组1.1 输入固定长度1.2长度不固定 2、固定二维数组3、以非空格隔开的元素输入3、常见数据结构定义以及输入3.1 链表 前言 C中的输入输出函数有很多,我们本章只针对大部分算法题…

上位机图像处理和嵌入式模块部署(树莓派4b开机界面程序自启动)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 前面我们学习了如何在树莓派4b上面开发qt,也学习了如何用/etc/rc.local启动控制台程序,那今天我们继续学习一下如何利用树莓…

docker compose安装redis

一、安装准备 在docker hub查看redis镜像版本。查看地址如下: Dockerhttps://hub-stage.docker.com/_/redis/tags 二、拉取docker镜像 我这里用redis:6.2.14版本,先拉取镜像。命令如下: docker pull redis:6.2.14 查看刚刚下载的镜像&am…

链表的从尾到头打印(递归)

目录 链表的从尾到头打印&#xff08;递归&#xff09; 链表的从尾到头打印&#xff08;递归&#xff09; 递归打印链表 #include <bits/stdc.h> using namespace std;void coutls(list<int>::iterator iter, list<int>::iterator node_end){if (iter!node…

[python数据处理系列] 深入理解与实践基于聚类的过采样与欠采样技术:以K-Means为例

目录 一、过采样介绍 (一)什么是过采样 (二)过采样的优点 (三)过采样的缺点 二、欠采样介绍 (一)什么是欠采样 (二)欠采样的优点 (三)欠采样的缺点 三、基于聚类的欠抽样方法(K-Means欠采样/KMeans-Undersampling) (一)KMeans欠采样原理及其步骤介绍 (二)为什么不采…

clickhouse学习笔记05

ClickHouseSpringBoot2.XMybatisPlus整合搭建 添加需要的依赖&#xff1a; 添加clickhouse依赖&#xff1a; 配置数据库配置&#xff1a; 我们框架就搭建完了。 ClickHouse的项目案例统计需求讲解 ClickHouse的项目案例统计库表和数据准备 添加数据&#xff1a; 数据都插入进来…

js逆向进阶篇-某团酒店

提示!本文章仅供学习交流,严禁用于任何商业和非法用途,未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术而导致的任何意外,作者均不负责,如有侵权,可联系本文作者删除! 案例分析: 先来看看请求中有哪些参数是需要我们逆向,如下: mtgsig、fp、roh…

ERROR: [7df2405] missing Change-Id in commit message footer

git push origin HEAD:refs/for/[分支名] 使用“git push origin HEAD:refs/for/[分支名]”,报错信息见下图 报错信息:ERROR: [7df2405] missing Change-Id in commit message footer 解决办法 根据git的提示依次执行下面的语句即可 第一步:输入下面的语句,下载一个 g…

Java---数据类型与变量

1.字面常量 字面常量就是我们经常所说的常量&#xff0c;常量即在程序运行期间&#xff0c;固定不变的量。且常量是无法改变的&#xff0c;如果我们的代码有改变常量的操作&#xff0c;程序就会报错。 1.1字面常量的分类 字符串常量&#xff0c;整型常量&#xff0c;浮点数常…

FileLink内外网文件摆渡系统产品介绍

在现代企业中&#xff0c;往往存在着多个网络、系统之间的数据孤岛问题&#xff0c;数据难以互相访问和共享。 一、常用的内外网文件摆渡方式 传统的数据交换方式往往需要人工介入&#xff0c;效率低下且容易出错。如&#xff1a;U盘、FTP、VPN等&#xff0c;极易引发各种各样…

Mysql事务—隔离级别—脏读、不可重复读、幻读-遥遥领先版

事务的基本概念 事务就是一组原子性的操作&#xff0c;这些操作要么全部发生&#xff0c;要么全部不发生。事务把数据库从一种一致性状态转换成另一种一致性状态。 事务最经典也经常被拿出来说例子就是转账了。 假如小明要给小红转账1000元&#xff0c;这个转账会涉及到两个…

libcudart.so.10.2: cannot open shared object file: No such file or directory

文章目录 整体过程细节在虚拟环境中安装cuda 10.2在虚拟环境中安装cuda 12.1 整体过程 首先出现这个报错说明在/usr/local/cuda-11.5/lib64目录中确实没有libcudart.so.10.2这个文件&#xff0c;然后按照网上的教程&#xff0c;我在虚拟环境中安装了cuda10.2&#xff08;由于用…

mysql面试题九(SQL优化)

目录 1.一条 SQL 是如何执行的 2.索引失效的几种情况 3.EXPLAIN 4.Where 子句如何优化 5.超大分页或深度分页如何处理 6.大表查询如何优化 7.分库分表 基本概念 分库分表方法 水平拆分 垂直拆分 分库分表后的注意事项 1.一条 SQL 是如何执行的 在MySQL中&#xff0…

Windows自动化重启python脚本

博主遇到一个需求&#xff1a;每天都需要定时重启一个python脚本&#xff0c;这个脚本是跑在windows电脑上的&#xff0c;下面是博主的解决方法&#xff1a; 获取已经启动的应用的IDkill这个应用ID再次根据指定的Python环境运行这个脚本 文章目录 解决步骤1. 获取已经启动的应…

uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项(带您一次打包成功)

在移动应用开发中&#xff0c;地图功能是一个非常常见且实用的功能&#xff0c;可以帮助用户快速定位并浏览周边信息。而在uni-app开发中&#xff0c;使用地图功能也是一项必备技能。本文将介绍uni-app使用地图功能打包安卓apk的注意事项&#xff0c;帮助开发者顺利完成地图功能…

掼蛋跟牌技巧

掼蛋跟牌是指其他玩家领出牌&#xff0c;自己跟着出牌&#xff0c;在跟牌的时候&#xff0c;分为强牌和弱牌两种情况&#xff0c;一般强牌以顺牌为主&#xff0c;弱牌以顶牌为主。 一、上家领出牌 在游戏前期&#xff0c;上家领出牌的时候&#xff0c;应该尽量跟牌&#xff0c;…

Pulsar 2

文章目录 一、Pulsar高级组件基本使用1、Funcation(轻量级计算流程)概念与使用Function背景介绍什么是Functions如何使用 2、Pulsar Connector 连接器Pulsar Connector 连接器 ----> Pulsar Flink Connector 3、Transactions事务支持相关的操作Pulsar如何实现Exactly-OncePu…

2024年的Java版本选择?java 17 安装

文章目录 2024年的Java版本选择&#xff1f;java 1.8 和 java17 什么区别&#xff1f;java 17 安装windows 11安装java 17C:\Program Files\Common Files\Oracle\Java\javapath是什么 2024年的Java版本选择&#xff1f; 3年前&#xff0c;java 1.8是市场主流&#xff08;还有一…