javascript - 带有组合 API 的 Vue 3 事件总线

Question

我已设置 mitt并尝试将事件分派(dispatch)给另一个组件，但我很难，因为在 setup()方法它没有 this用于访问应用程序实例。
这是我尝试过的:

import App from './App.vue'
const el = document.getElementById('app')

import mitt from 'mitt';
const emitter = mitt();

const app = createApp(App)
app.config.globalProperties.emitter = emitter;
app.mount(el);

在组件中，我想调度一个事件

export default {
   setup() {
      function toggleSidebar() {
          this.emitter.emit('toggle-sidebar');

          console.log(this); // binds to setup(), not the vue instance.
      }
   }
}

如this不存在，我无法访问 .emitter .我错过了什么？如何在 Vue 3 组合 API 中使用官方建议的手套？

顺便说一句，如果我使用 v2 语法，我可以访问 this.emitter .但我对组合 API 方式很好奇

export default {
  mounted() {
    console.log(this.emitter); // works
  }
} 

Answer 1

要在 Vue 3 组合 API 中使用事件总线，请使用 Vue 3 的新 provide main.js 中的 api，然后 inject 在任何组件中:
1.安装mitt :

npm install mitt

2.提供:
main.js

import { createApp } from 'vue';
import App from './App.vue';

import mitt from 'mitt';                  // Import mitt
const emitter = mitt();                   // Initialize mitt

const app = createApp(App);
app.provide('emitter', emitter);          // ✅ Provide as `emitter`
app.mount('#app');

3. 注入(inject)
3a。任何组件 - 发射一个事件

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter'); // Inject `emitter`
    const mymethod = () => {
      emitter.emit('myevent', 100);
    };
    return {
      mymethod
    }
  }
}

调用 mymethod从按钮单击或其他东西。
3b。任何组件 - 收听 为事件

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter');   // Inject `emitter`

    emitter.on('myevent', (value) => {   // *Listen* for event
      console.log('myevent received!', `value: ${value}`);
    });
  },
}

安慰

myevent received! value: 100