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

Tsinkaη

已于 2025-06-05 11:30:38 修改

阅读量833

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2025-04-21 19:30:13 首次发布

本文链接：https://blog.youkuaiyun.com/RumbleWx/article/details/147400912

在基于 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 的变化，并在变化时执行刷新逻辑。

// 界面 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>），提升用户体验。