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

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

news 来源：原创 2025/4/22 14:44:00

在基于 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>），提升用户体验。