无法使用 Ionic 5 收听发出的事件

Question

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

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

预期的行为是获取 selected 服务并将其与其余预订信息一起发送到 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 包：
在用户选择服务时发出事件，而不是在他们单击“立即预订”时发出事件
直接调用 setup() 中的侦听器，而不是 onMounted。

更新

我注意到当我离开预订页面然后返回时会调用侦听器。因此，如果我从 service details -> booking -> 返回 service details -> booking 它会触发总线并捕获有效载荷。

Answer 1

这可能是框架级别的错误。我已经通过 Twitter 与 Ionic 团队交谈，他们建议我改用查询参数，所以这就是我选择的路线。

Answer 2

可能是 rxjs 帮助你

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

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

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

Answer 3

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

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

我认为这个 bug 真的很讨厌，因为全局事件支持已从 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()

查看日志

无法使用 Ionic 5 收听发出的事件

Unable to listen to emitted events with Ionic 5

javascript

ionic-framework

vue.js

vue-composition-api

ionic5