Unable to listen to emitted events with Ionic 5

Question

I created a simple ionic app that allows users to book services. The user would select a service category, choose a service(s) then navigate to a form to complete the booking.

I've setup an event bus using tiny emitter since the project uses vue 3 with the composition api. The data emits as expected however when navigating to the booking form the listener is not triggered.

The expected behaviour is to get the selected service(s) and send it along with the rest of the booking info to a 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 - Nothing happens in the console log

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

I know this works in a regular Vue 3 project but I'm not sure why it's not working with ionic.

Things I've tried

• Using the native emitter via context as a setup param. https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
• Using the mitt package as described here: Vue 3 Event Bus with Composition API
• Emitting the event when the user chooses a service rather than when they click "Book Now"
• Calling the listener in setup() directly rather than onMounted.

UPDATE

I noticed the listener gets called when I navigate off the booking page then back to it. So if I go from service details -> booking -> back to service details -> booking it triggers the bus and the payload is captured.

Answer 1

This may be a framework level bug. I've spoken to the Ionic team via twitter and was advised to use query params instead so that's the route I took.