Vue3使用事件总线（Event Bus）实现发布订阅模式

Vue3使用事件总线（Event Bus）实现发布订阅模式

在Vue.js中，订阅发布模式（也称为发布-订阅模式或Pub/Sub模式）是一种设计模式，用于促进组件或对象之间的松散耦合。这种模式允许组件相互通信，而无需直接相互引用，这有助于提高代码的模块化和可重用性。

在订阅发布模式中，存在两个主要角色：发布者（Publisher）和订阅者（Subscriber）。

1. 发布者（Publisher）：负责发布消息或事件。在Vue中，这通常是通过触发一个自定义事件或更改状态来实现的。

2. 订阅者（Subscriber）：监听并响应发布者发出的消息或事件。在Vue中，组件可以监听这些事件或状态变化，并据此执行特定的动作。

订阅发布模式的关键在于，发布者和订阅者不需要直接相互了解。发布者只需要发布消息，而不关心谁在监听。同样，订阅者只需订阅它感兴趣的消息，而不用关心谁是发布者。

在Vue应用中，这种模式通常通过以下方式实现：

1. 事件总线（Event Bus）：创建一个全局的事件中心，各个组件可以向该中心发布事件或从中订阅事件。Vue实例（new Vue()）本身就是一个事件发射器，可以用作事件总线。

2. Vuex：对于更复杂的应用，Vuex提供了一个集中式存储，允许多个组件共享状态。组件可以响应状态的变化（订阅），或者触发状态的变化（发布）。

这种模式有助于将组件逻辑分离，使得组件更加独立和可重用，同时简化了组件间的通信。

实现

首先，创建一个事件总线：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后，在组件中使用这个事件总线：

发布者组件（Publisher） - 发送事件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script setup>
import { EventBus } from './eventBus.js';

const sendMessage = () => {
  EventBus.$emit('messageEvent', 'Hello from Publisher!');
};
</script>

订阅者组件（Subscriber） - 监听状态变化：

<template>
  <div>Received Message: {{ message }}</div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const message = computed(() => store.state.message);
</script>

在这个例子中，我们可以看到订阅发布模式如何在Vue中实现，它有助于组件间的通信，同时保持了它们的独立性和可重用性。