当前位置：首页 > news >正文

基于 Vue，使用Vuex 或事件总线实现跨组件通信

news 来源：原创 2025/7/22 3:37:23

在基于 Vue + Element UI 的 RuoYi 系统中，如果需要在一个界面（界面 A）执行某个操作后，通知另一个界面（界面 B）刷新，可以通过 Vuex 或事件总线（Event Bus）来实现跨组件通信。以下是两种常见的实现方式：

方案 1：使用 Vuex 实现状态管理

Vuex 是 Vue 官方推荐的状态管理工具，适合在多个组件之间共享状态或触发某些操作。

实现步骤

定义 Vuex 状态和方法：在 Vuex store 中定义一个标志位，用于通知界面 B 刷新。

// store/modules/erp.js
const state = {refreshFlag: false, // 标志位，用于通知刷新
};const mutations = {SET_REFRESH_FLAG(state, flag) {state.refreshFlag = flag;},
};const actions = {triggerRefresh({ commit }) {commit('SET_REFRESH_FLAG', true); // 设置刷新标志为 true},
};export default {namespaced: true,state,mutations,actions,
};

在界面 A 中触发刷新动作：当界面 A 执行某个操作后，通过 Vuex 的 dispatch 方法触发刷新。
```
// 界面 A 的代码
this.$store.dispatch('erp/triggerRefresh');
```

在界面 B 中监听刷新标志：在界面 B 中通过 Vuex 的 mapState 或 watch 监听 refreshFlag 的变化，并在变化时执行刷新逻辑。

Javascript

深色版本

// 界面 B 的代码
import { mapState } from 'vuex';export default {computed: {...mapState('erp', ['refreshFlag']),},watch: {refreshFlag(newVal) {if (newVal) {this.refreshPage(); // 执行刷新逻辑this.$store.commit('erp/SET_REFRESH_FLAG', false); // 重置标志位}},},methods: {refreshPage() {console.log("界面 B 正在刷新...");// 执行具体的刷新逻辑，例如重新加载数据},},
};

方案 2：使用事件总线（Event Bus）

如果不想引入 Vuex，可以使用事件总线来实现简单的跨组件通信。

实现步骤

创建事件总线：在项目的入口文件（如 main.js）中创建一个全局的事件总线。
```
// main.js
Vue.prototype.$bus = new Vue();
```
在界面 A 中触发事件：当界面 A 执行某个操作后，通过事件总线发出一个自定义事件。
```
// 界面 A 的代码
this.$bus.$emit('refresh-page'); // 发出刷新事件
```

在界面 B 中监听事件：在界面 B 中通过事件总线监听该事件，并在事件触发时执行刷新逻辑。

// 界面 B 的代码
export default {created() {this.$bus.$on('refresh-page', this.refreshPage);},beforeDestroy() {this.$bus.$off('refresh-page', this.refreshPage); // 移除监听，避免内存泄漏},methods: {refreshPage() {console.log("界面 B 正在刷新...");// 执行具体的刷新逻辑，例如重新加载数据},},
};

对比两种方案

特性	Vuex	事件总线（Event Bus）
复杂度	较高，适合中大型项目	较低，适合小型项目或简单场景
可维护性	高，集中管理状态	较低，分散在各个组件中
性能	更高效，适合频繁通信	适合偶尔通信，过多事件可能导致混乱
适用场景	多个组件间共享状态或触发操作	简单的跨组件通信

注意事项

Vuex 的模块化：
- 如果使用 Vuex，建议将 ERP 相关的状态和操作封装到独立的模块中（如 erp.js），以便于管理和维护。
事件总线的清理：
- 使用事件总线时，务必在组件销毁前移除事件监听器（this.$bus.$off），以避免内存泄漏。
用户体验：
- 刷新逻辑可能涉及到数据重新加载，确保加载过程中有适当的加载提示（如 <el-loading> 或 <el-skeleton>），提升用户体验。

总结

Vuex 是更推荐的方式，尤其是对于中大型项目，它能更好地管理状态和操作。
事件总线 是一种轻量级的解决方案，适合简单的跨组件通信场景。

基于 Vue，使用Vuex 或事件总线实现跨组件通信

在基于 Vue Element UI 的 RuoYi 系统中，如果需要在一个界面（界面 A）执行某个操作后，通知另一个界面（界面 B）刷新，可以通过 Vuex 或事件总线（Event Bus）来实现跨组件通信…...

编程日记 2025/7/22 3:37:23

【C++篇】string类的终章：深浅拷贝 + 模拟实现string类的深度解析（附源码）

💬 欢迎讨论：在阅读过程中有任何疑问，欢迎在评论区留言，我们一起交流学习！ 👍 点赞、收藏与分享：如果你觉得这篇文章对你有帮助，记得点赞、收藏，并分享给更多对C感兴趣的…...

编程日记 2025/7/22 3:23:09

线性DP：最短编辑距离

Dp 状态表示 f（i，j） 集合所有将A[1~i]变成B[1~j]的操作方式属性min 状态计算 （划分） 增f(i,j)f(i,j-1)1//A[i]元素要增加，说明A前i位置与B前j-1相同删f(i,j)f(i-1,j)1//A[i]元素要删除，说明A前i…...

编程日记 2025/7/22 2:57:08

【全网最全】23种设计模式思维导图详解 | 含React/Vue/Spring实战案例

【全网最全】23种设计模式思维导图详解 | 含React/Vue/Spring实战案例导图概述本文通过高清思维导图系统梳理了23种设计模式，分为创建型、结构型、行为型三大类，并标注了各模式在主流框架（如React、Vue、Spring）中的典型应用场…...

编程日记 2025/7/22 2:46:33

8086微机原理与接口技术复习（1）存储器（2）接口

8086微机原理与接口技术复习（1）存储器（2）接口存储器8086的存储空间存储器的拓展存储器的分类接口8086I/O82558253串行通信存储器我们上的是嵌入式与接口技术这门课，存储器章节重点在于理解8086CPU的存储体结构&am…...

编程日记 2025/7/22 2:59:34

第 6 篇：衡量预测好坏 - 评估指标

第 6 篇：衡量预测好坏 - 评估指标上一篇，我们小试牛刀，用朴素预测、平均法、移动平均法和季节性朴素预测这几种简单方法对未来进行了预测。我们还通过可视化将预测结果与真实值进行了对比。但光靠眼睛看图来判断“哪个预测更好”往往是不…...

编程日记 2025/7/22 3:04:51

极刻AI搜v1.0 问一次问题 AI工具一起答

软件名：极刻AI搜版本：v1.0 功能：囊括了互联网上比较好用的一些支持”搜索“的网站或者工具开发平台：nodepythonweb 分类有： AI搜索（支持智能问答的AI搜索引擎） 常规搜索：&#xff…...

编程日记 2025/7/22 2:47:30

单片机 + 图像处理芯片 + TFT彩屏进度条控件

进度条控件使用说明概述本进度条控件基于单片机 RA8889/RA6809 TFT开发，提供了简单易用的进度显示功能。控件支持多个进度条同时显示、自定义颜色、边框和标签等特性，适用于需要直观显示进度信息的各类应用场景。特性支持多个进度条同时显示可…...

编程日记 2025/7/22 3:21:10

RHCSA Linux系统用户和组的管理

用户管理：增useradd 删userdel 改usermod 查id 组的管理：增groupadd 删groupdel 改groupmod 查groups /etc/default/useradd 即定义useradd默认参数，也定义了/etc/passwd ，/etc/shadow，/etc/group&#…...

编程日记 2025/7/22 3:01:38

2025年pta团队设计天梯赛题解

题解不全，望见谅 L1-1 珍惜生命题目前辈工程师 Martin Golding 教育我们说：“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.”（写代码的时候，总是要…...

编程日记 2025/7/21 23:25:34

Vue---vue2和vue3的生命周期

核心生命周期对比生命周期阶段Vue 2 钩子Vue 3 Composition API初始化beforeCreate无（使用 setup() 替代）初始化完成created无（使用 setup() 替代）挂载前beforeMountonBeforeMount挂载完成moun…...

编程日记 2025/7/21 5:14:52

C#常用LINQ

在开发时发现别人的代码使用到了LINQ十分便捷且清晰，这里记录一下常用LINQ和对应的使用。参考链接：LINQ 菜鸟教程使用的学生类和字符串用于测试 public class Student {public int StudentID;public string StudentName;public int Age; }Student[] st…...

编程日记 2025/6/29 12:16:13

Java--数组的应用

一、数组的地址值数组的地址值表示数组在内存中的位置。 [I1eb44e46 [ ：表示当前是一个数组I：表示当前数组是int类型：表示一个间隔符号（固定格式）1eb44e46：数组真正的地址值（十六进制&#…...

编程日记 2025/6/29 9:53:05

PostgreSQL基础

一、PostgreSQL介绍 PostgreSQL是一个功能强大的开源的关系型数据库。底层基于C实现。 PostgreSQL的开源协议和Linux内核版本的开源协议是一样的。。BDS协议，这个协议基本和MIT开源协议一样，说人话，就是你可以对PostgreSQL进行一些封装&a…...

编程日记 2025/6/29 12:11:16

Linux系统管理与编程13:基于CentOS7.x的LAMP环境部署

兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。一、实验目标 1.理解Apache服务器原理 2.掌握Apache服务器的配置文件 3.具备安装Mysql数据库能力 4.具备安装Apache服务器能力 5.具备PHP与数据库连接能力 6.具备Apache、Mysql、…...

编程日记 2025/7/20 23:08:46

浅谈AI致幻

文章目录当前形势下存在的AI幻觉（AI致幻）什么是AI幻觉AI幻觉的类型为什么AI会产生幻觉AI幻觉的危害与影响当前应对AI幻觉的技术与方法行业与学术界的最新进展未来挑战与展望结论当前形势下存在的AI幻觉（AI致幻） 什么是AI幻觉 …...

编程日记 2025/6/29 12:07:10

【架构】-- StarRocks 和 Doris 介绍与选型建议

StarRocks 和 Doris 的介绍随着大数据分析需求的不断增长，企业对高性能、低延迟的分析型数据库提出了更高的要求。StarRocks 和 Apache Doris 是当前主流的开源 MPP（Massively Parallel Processing）数据库系统，广泛应用于实时分析、报表生成和数据仓库等场景。本文将从架…...

编程日记 2025/6/29 11:03:39

【SF顺丰】顺丰开放平台API对接（注册、API测试篇）

1.注册开发者账号注册地址：顺丰企业账户中心 2.登录开发平台登录地址：顺丰开放平台 3.开发者对接点击开发者对接 4.创建开发对接应用开发者应用中“新建应用”创建应用，最多创建应用限制数量5个注意：需要先复制保存生产校验…...

编程日记 2025/6/29 12:21:31

C语言高频面试题——常量指针与指针常量区别

1. 常量指针（Pointer to Constant） 定义： 常量指针是指向一个常量数据的指针，即指针指向的内容不能通过该指针被修改。语法： const int* ptr;或者： int const* ptr;解释： const修饰的是指…...

编程日记 2025/7/19 22:03:38

Novartis诺华制药社招入职综合能力测评真题SHL题库考什么？

一、综合能力测试诺华制药的入职测评中，综合能力测试是重要的一部分，主要考察应聘者的问题解决能力、数值计算能力和逻辑推理能力。测试总时长为46分钟，实际作答时间为36分钟，共24题。题型丰富多样，包括图形变换题、分…...

编程日记 2025/6/29 12:22:13

网页下载的m3u8格式文件使用FFmpeg转为MP4

FFmpeg 是一个强大的开源音视频处理工具，可以直接将 M3U8 合并并转换为 MP4。 1.步骤： 下载 FFmpeg 官网：https://ffmpeg.org/ Windows 用户可以直接下载静态构建版本（Static Build），解压后即可使用。 2…...

编程日记 2025/6/29 10:54:04

Java 并发包核心机制深度解析：锁的公平性、异步调度、AQS 原理全解

🧠 Java 并发包核心机制深度解析：锁的公平性、异步调度、AQS 原理全解 Java 并发编程的地基是 java.util.concurrent，但真正驱动这个系统的，是它背后隐藏的三根支柱： ReentrantLock 的公平/非公平调度策略Completabl…...

编程日记 2025/7/17 2:48:55

μC/OS 版本演进过程 | uC/OS-II 和 uC/OS-III 有什么区别？

uC/OS 系列是由 Jean J. Labrosse 开发的一套嵌入式实时操作系统（RTOS），以其高质量源码和清晰的结构，在嵌入式教学和某些工业项目中有着广泛影响。该系统主要包含两个版本：uC/OS-II 和 uC/OS-III。本文将带你了解这两…...

编程日记 2025/6/29 12:03:33

永磁同步电机参数辨识算法--递推最小二乘法辨识

一、原理介绍最小二乘法大约是1795年高斯在其著名的星体运动轨道预报研究工作中提出的。后来，最小二乘法成为了估计理论的基石。最小二乘法由于原理简明、收敛较快、易于编程实现等特点，在系统参数估计中应用相当广泛。其基本原理为： 改写…...

编程日记 2025/6/29 12:20:08

树莓派5+L298N控制电机

准备工作：树莓派5开发板L298N 控制板电机1个12v的电池1个杜邦线若干L298N 引脚介绍（1）图中标注的1和2都是都在输出引脚，可以各接入一个电机，电机不分正负极，随便接（2）图中3这里是控制板的电源输入正负极，可以输入5v和12v，我这里输入的是12v电源，使用的时候应该把…...

编程日记 2025/6/29 10:45:44

UofTCTF-2025-web-复现

感兴趣朋友可以去我博客里看，画风更好看 UofTCTF-2025-web-复现文章目录 scavenger-huntprismatic-blogscode-dbprepared-1prepared-2timeless scavenger-hunt 国外的一些ctf简单题就喜欢把flag藏在注释里，开源代码找到第一部分的flag 抓个包返回数据…...

编程日记 2025/7/5 3:22:03

记录seatunnel排查重复数据的案例分析

文章目录背景分析检查现象检查B集群是否有异常，导致重复消费的分析同步任务修复问题发现flink job 一直报异常修复问题背景使用seatunnel 同步数据从A 集群kafka 同步到B集群kafka,现象是发现两边数据不一致，每天10w级别会多几十条数据分析检查…...

编程日记 2025/6/29 10:27:58

技术速递｜Agent 模式：对所有用户开放，并支持 MCP

作者：Isidor Nikolic 翻译/排版：Alan Wang Agent 模式正在向所有 VS Code 用户推广！它充当一个自主的配对编程助手，能够根据你的指令执行多步编码任务，例如分析代码库、提出文件修改建议以及运行终端命令。它能够响应编…...

编程日记 2025/6/29 10:16:08

实验四 Java图形界面与事件处理

实验四 Java图形界面与事件处理 ###实验目的掌握Java语言中AWT和Swing组件的基本用法掌握Java语言中的事件处理方法掌握Java语言中事件源、监视器和处理事件的接口的概念 ###实验内容图形用户界面设计程序(ArtFont.java)（90分） 要求：设…...

编程日记 2025/6/29 11:40:47

day2 python训练营

浙大疏锦行 python训练营介绍...

编程日记 2025/6/29 10:58:00

Linux下 REEF3D及DIVEMesh 源码编译安装及使用

目录软件介绍基本依赖一、源码下载 1、REEF3D 2、DIVEMesh 二、解压缩三、编译安装 1、REEF3D 2、DIVEMesh 四、算例测试软件介绍 REEF3D是一款开源流体动力学框架，提供计算流体力学及波浪模型。软件采用高效并行化设计，可以在大规模处理器…...

编程日记 2025/7/9 16:22:34

堡垒机和跳板机之区别（The Difference between Fortress and Springboard Aircraft）

堡垒机和跳板机之区别在网络安全、安全运维领域，堡垒机和跳板机是两个常被提及且功能相似的概念，但它们在实际应用、功能定位以及技术实现上存在着明显的差异。本文将对堡垒机和跳板机进行详细的解析与比较，帮助读者更好地理解这两种网络安…...

编程日记 2025/6/29 12:04:30

《Android 应用开发基础教程》——第五章：RecyclerView 列表视图与适配器机制

目录第五章：RecyclerView 列表视图与适配器机制 5.1 为什么要使用 RecyclerView？ 5.2 基本结构图 5.3 RecyclerView 使用步骤 1️⃣ 添加 RecyclerView 依赖（Android Studio） 2️⃣ 布局文件（activity_main.xml&…...

编程日记 2025/6/29 10:32:19

【第四章】19-匹配规则定义

在优化Web服务器性能与增强其功能性的过程中，深入理解Nginx的location匹配规则显得尤为关键。它不仅决定了如何高效地路由不同类型的客户端请求，而且是实现精准响应的基础。通过掌握精确匹配、前缀匹配及正则表达式匹配等规则，管理员能够灵活配置以支持复杂的业务需求，同时…...

编程日记 2025/7/7 12:50:21

[PTA]2025CCCC-GPLT天梯赛现代战争

来源：L1-112 现代战争-Pintia题意：给定 n m n\times m nm 的矩阵，进行 k k k 次操作，每次操作清除矩阵当前最大值所在行和所在列的全部元素，求最终矩阵。关键词：模拟(签到)题解：非常水的模拟…...

编程日记 2025/6/29 9:40:38

操作系统期中复习

未完待续----后续补充全书完整板一、计算机系统概述 1.1操作系统的基本概念 1.1.1操作系统的概念操作系统：是指控制和管理整个计算机系统的硬件与软件资源，合理地组织、调度计算机的工作与资源的分配，进而为用户和其他软件提供方便接口…...

编程日记 2025/6/29 10:31:36

Linux 入门十一：Linux 网络编程

一、概述 1. 网络编程基础网络编程是通过网络应用编程接口（API）编写程序，实现不同主机上进程间的信息交互。它解决的核心问题是：如何让不同主机上的程序进行通信。 2. 网络模型：从 OSI 到 TCP/IP OSI 七层模型&…...

编程日记 2025/6/29 11:47:53

车载软件架构 --- 二级boot设计说明需求规范

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：周末洗了一个澡，换了一身衣服，出了门却不知道去哪儿，不知道去找谁，漫无目的走着，大概这就是成年人最深的孤独吧! 旧人不知我近况，新人不知我过…...

编程日记 2025/6/29 11:13:29

主机下载chrony sudo apt install chrony修改配置文件： sudo gedit /etc/chrony/chrony.conf# Welcome to the chrony configuration file. See chrony.conf(5) for more # information about usuable directives.# This will use (up to): # - 4 sources fro…...

编程日记 2025/6/29 12:11:20

开箱即用：一款带世界时钟简约好用在线时间戳转换工具源码

这款工具简直是为“时间管理大师”和“国际化玩家”量身定制！它不仅支持全球十大热门语言，还能无缝切换多时区，帮你轻松搞定时间戳和日期的转换。重点是，它完全前端实现，无需复杂后端，部署起来比泡杯咖啡还简单！开发人员可以在本地电脑运行来进行时间戳装换，还可以加Ad…...

编程日记 2025/6/29 11:19:48

代码随想录第22天：回溯算法4

一、全排列（Leetcode 46） 与组合问题不同，排列问题要注意2个特点： 每层都是从0开始搜索而不是startIndex需要used数组记录path里都放了哪些元素 class Solution:def permute(self, nums):result [] # 存储所有的排列self.back…...

编程日记 2025/7/11 10:25:01

cdq 系列题解

从二维数点（二维偏序）到三维偏序。用 cdq 分治可以解决二维数点问题。 1.洛谷 P1908 逆序对题意求所有数对 ( i , j ) (i,j) (i,j) 的个数，满足 i < j i<j i<j 且 a i > a j a_i>a_j ai>aj。 1 ≤ n ≤ 5 1…...

编程日记 2025/6/29 11:11:36

稳压二极管详解：原理、作用、应用与选型要点

一、稳压二极管的基本定义稳压二极管（齐纳二极管，Zener Diode） 是一种利用反向击穿特性实现电压稳定的半导体器件。其核心特性是：在反向击穿时，两端电压几乎恒定（Vz），且不会因电流…...

编程日记 2025/6/29 10:57:19

如何在量子计算时代保障 Sui 的安全性

量子计算的出现对依赖加密机制的系统构成了重大威胁。区块链依赖加密技术来进行身份管理、安全交易和数据完整性保护，而量子计算具备打破传统加密模型的能力，因此区块链面临特别严峻的挑战。然而，Sui 天生具备“加密灵活性”，可…...

编程日记 2025/6/29 11:45:43

linux sysfs使用cat无显示的原因：返回值未赋值

在Linux驱动中通过sysfs定义的文件使用cat命令无显示，通常由以下原因导致： 1. show函数未正确实现原因：show函数（如show_status）未正确填充缓冲区或返回有效字节数。排查： // 错误示例：未写…...

编程日记 2025/7/19 22:30:01

Discuz论坛网站忘记管理员密码进不去管理中心怎么办？怎么改管理员密码？

Discuz论坛网站忘记管理员密码进不去管理中心怎么办？怎么改管理员密码？今天驰网飞飞和你分享首先我们需要用到Discuz！急诊箱tools.php这个文件，可在下载中心搜索关键词下载，下载好后将tools.php文件放到网站根目录&a…...

编程日记 2025/7/16 16:02:18

基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案，结合工商数据、供应链记录及舆情数据，实现隐性关联识别与动态风险评估

以下是基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案，结合工商数据、供应链记录及舆情数据，实现隐性关联识别与动态风险评估： 一、数据整合与图谱构建多源数据融合与清洗 • 数据源：整合企业工商数据（股权…...

编程日记 2025/6/29 10:26:57

数据结构第六章（五）-拓扑排序、关键路径

数据结构第六章（五） 图的应用（二）一、有向无环图二、拓扑排序1. AOV网2. 拓扑排序3. 逆拓扑排序三、关键路径1.AOE网2.关键路径2.1 介绍2.2 关键路径的求法总结图的应用（二） 一、有向无环图首先我们得…...

编程日记 2025/6/29 10:12:20

stc32单片机实现串口2M波特率满带宽传输

我需要实现已极高的速度用串口往上位机发送数据, 并且还不能占用mcu资源, 使用的单片机位stc32g8K64 我的方法是串口接收采用中断接收, 发送采用dma自动发送, 预先初始化16个64字节的缓冲区, 每次通过串口发送时, 先找到当前的空闲缓冲区, 然后往缓冲区里填充数据, 在dma传输完…...

编程日记 2025/7/18 10:38:24

uni-app 状态管理深度解析：Vuex 与全局方案实战指南

uni-app 状态管理深度解析：Vuex 与全局方案实战指南一、Vuex 使用示例 1. 基础 Vuex 配置 1.1 项目结构 src/ ├── store/ │ ├── index.js # 主入口文件 │ └── modules/ │ └── counter.js # 计数器模块 └── main.js …...

编程日记 2025/6/29 9:40:32

方案 1：使用 Vuex 实现状态管理

实现步骤

方案 2：使用事件总线（Event Bus）

实现步骤

对比两种方案

推荐选择

注意事项

总结

相关文章：