无法使用 Ionic 5 监听发出的事件答案

【问题标题】：Unable to listen to emitted events with Ionic 5无法使用 Ionic 5 监听发出的事件
【发布时间】：2021-08-12 18:44:12
【问题描述】：

我创建了一个简单的 ionic 应用程序，允许用户预订服务。用户将选择服务类别，选择服务，然后导航到表单以完成预订。

我已经使用 tiny emitter 设置了一个事件总线，因为该项目使用 vue 3 和组合 API。数据按预期发出，但是在导航到预订表单时不会触发侦听器。

预期行为是获取所选服务并将其与其余预订信息一起发送到 REST api。

eventBus.js

import { TinyEmitter } from 'tiny-emitter';
const emitter = new TinyEmitter();
const eventBus = () => {
    return { emitter };
};
export default eventBus;

Service.vue

// template

<ion-button routerDirection="forward" routerLink="/booking" @click="sendEvent">Book Now</ion-button>

// script

import eventBus from './eventBus';

export default {
  ...
  setup() {
    ...
    const sendEvent = () => {
      eventBus().emitter.emit('selected-service', 100) // the real code emits an array
    }
    return { sendEvent }
  }

}

Booking.vue - 控制台日志中没有任何反应

<script>
...
onMounted(() => {
  eventBus().emitter.on('selected-service', (payload) => {
    console.log('listener', payload);
  })
})
</script>

我知道这适用于常规 Vue 3 项目，但我不确定为什么它不适用于 ionic。

我尝试过的事情

通过context 使用本机发射器作为设置参数。 https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
使用mitt 包，如下所述：Vue 3 Event Bus with Composition API
在用户选择服务而不是点击“立即预订”时发出事件
直接调用setup() 中的监听器而不是onMounted。

更新

我注意到，当我离开预订页面然后返回该页面时，监听器会被调用。因此，如果我从服务详情 -> 预订 -> 返回服务详情 -> 预订，它会触发总线并捕获有效负载。

【问题讨论】：

我创建了一个快速启动 repo 来复制这个问题：github.com/carlHandy/Ionic5-Event-Bus

标签： javascript vue.js ionic-framework ionic5 vue-composition-api

【解决方案1】：

这可能是框架级别的错误。我已经通过 twitter 与 Ionic 团队进行了交谈，并被建议使用查询参数，所以这就是我采取的路线。

【讨论】：

【解决方案2】：

可能是 rxjs 对你有帮助

import { Subject } from 'rxjs';
private newProduct = new Subject<any>();

publishNewProduct() {
 this.newProduct.next();
}

subscribeNewProduct(): Subject<any> {
 return this.newProduct;
}

【讨论】：

【解决方案3】：

刚刚遇到了同样的问题，更糟糕的是，在我的情况下，该错误是间歇性的，并且仅在关闭开发工具控制台时才会出现。打开开发工具或使用警报会导致组件及时呈现以接收事件。我几乎失去了理智。

在我的情况下，使用 immediate: true 在道具上使用观察者是最干净的解决方案。

我认为这个错误真的很讨厌，因为全局事件支持已从 Vue2 和 Vue3 升级文档explicitly suggest to use tiny emitter to achieve it 中删除。

这会导致几乎无法追溯的奇怪行为和错误。出于这个原因，我认为应该尽可能避免全局事件模式。

作为最后一点，如果它可以帮助某人，这就是我最终能够使用控制台日志将问题追溯到全局事件总线的方式：

const logs = []
app.config.globalProperties.$log = function () { logs.push(arguments) }
window.viewlogs = () => {
  for (let i = 0; i < logs.length; i++) {
    console.log.apply(window, logs[i])
  }
}

一旦出现错误，我可以使用 window.viewlogs() 打开开发工具并查看日志

【讨论】：