基于 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 的 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，可以使用事件总线来实现简单的跨组件通信。

实现步骤

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