如何在 Vue 3.0 使用 EventBus

上一篇升級筆記提到，雖然 Vue 3.0 移除了事件處理的 $on, $off 以及 $once 等 API， 然而我們還是可以借助其他方式來達到 EventBus 的效果。

這是今天的主角 Mitt

Mitt 是一套用來處理事件訂閱/發佈的函式庫，透過 Mitt 我們可以將 Vue 3.0 移除的 $on, $off 等功能再度重現，而更重要的是，它只有 200 byte 。

你沒看錯，不是 200 kb，是 200 byte。

安裝

這裡我們透過 vite 來建立一個簡單的 Vue 3.0 專案:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn

接著為專案加入 mitt:

$ yarn add mitt

這樣就完成前置作業了。

建立 mitt 實體

mitt 的使用方式與過去透過空的 Vue 實體幾乎一樣。 我們在專案建立 mitt 實體，假設取名叫 bus.js:

import mitt from 'mitt'
export default mitt()

就兩行。

接著，分別在需要訂閱與接收事件的 Vue Component 裡，加入 bus.js :

import bus from './bus';

事件接收方，這裡在 created 階段訂閱 plus 自訂事件：

data() {
  return {
    count: 0
  }
},
methods: {
  plus () {
    this.count++;
  }
},
created() {
  bus.on('plus', this.plus);
}

事件發送方，建立一個 emit method 來向 bus 發送 plus 事件：

methods: {
  emit () {
    bus.emit('plus');
  }
}

以下是簡單的 Vue 3.0 Demo：