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

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


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

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

实现步骤
  1. 定义 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,
    };
  2. 在界面 A 中触发刷新动作: 当界面 A 执行某个操作后,通过 Vuex 的 dispatch 方法触发刷新。

    // 界面 A 的代码
    this.$store.dispatch('erp/triggerRefresh');
  3. 在界面 B 中监听刷新标志: 在界面 B 中通过 Vuex 的 mapStatewatch 监听 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,可以使用事件总线来实现简单的跨组件通信。

实现步骤
  1. 创建事件总线: 在项目的入口文件(如 main.js)中创建一个全局的事件总线。

    // main.js
    Vue.prototype.$bus = new Vue();
  2. 在界面 A 中触发事件: 当界面 A 执行某个操作后,通过事件总线发出一个自定义事件。

    // 界面 A 的代码
    this.$bus.$emit('refresh-page'); // 发出刷新事件
  3. 在界面 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
  • 如果只是简单的跨组件通信,且不想增加 Vuex 的复杂度,可以选择 事件总线

注意事项

  1. Vuex 的模块化

    • 如果使用 Vuex,建议将 ERP 相关的状态和操作封装到独立的模块中(如 erp.js),以便于管理和维护。
  2. 事件总线的清理

    • 使用事件总线时,务必在组件销毁前移除事件监听器(this.$bus.$off),以避免内存泄漏。
  3. 用户体验

    • 刷新逻辑可能涉及到数据重新加载,确保加载过程中有适当的加载提示(如 <el-loading> 或 <el-skeleton>),提升用户体验。

总结

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值