event.off is not removing the event

[bci24]

It seems that off is not working or I am missing something.

I am using mitt it in Vue 3

`import mitt from "mitt";
const Event = mitt();

const app = createApp(App);
app.config.globalProperties.Event = Event;
app.mount('#app');`

I have 2 components Category and CategoryDetails and when changing from one to another it seems that the off is not "destroying" the event.

In CategoryDetails component:

mounted() { const vm = this; this.Event.on('category.save', function(){ vm.formSubmit(); }); },

// it should clear the event - to no longer emit
unmounted() { this.Event.off('category.save'); }

Entering again in CateegoryDetails and emits the save, it make 2 request and so on....

I have tried to use in unmounted:

this.Event.all.clear();

and seems to work.

Why is not working if I specify the event name to off ???

Am i missing something ?

[littlekie]

How to solve this problem now？

[littlekie]

I have solved it that add all.delete(type) line in off function.

[Yrobot]

.off(name, handler) func means mitt will remove handler from the name handler map.
check the Usage on https://www.npmjs.com/package/mitt

[acuD1]

Manually deleting event : this.emitter.all.delete('eventName')

[redfox05]

I'm assuming the above solution is not ideal / might be messing with internal logic, so is it not possible to make the .off() function take an optional handler instead of required, and if handler is missing, delete all handlers with that label? Then it would work the same as @acuD1's workaround.

Update: That seems to be exactly what has been implemented in #124 but not yet an approved/merged PR.

[workforbala]

if both handler having same call back function name how we can differentiate between which one is on and which one is off ?

[mariusa]

Our usecase is defining a handler inline, not as a separate function, eg

bus.on('charge', payload => {
            //do stuff
        })

off(type) should remove all handlers for the given type, be it inline or with specific functions.

.off(name, handler) func means mitt will remove handler from the name handler map.

This isn't enough. Doesn't work for inline listeners.

[Yrobot]

Our usecase is defining a handler inline, not as a separate function, eg

bus.on('charge', payload => {
            //do stuff
        })

off(type) should remove all handlers for the given type, be it inline or with specific functions.

.off(name, handler) func means mitt will remove handler from the name handler map.

This isn't enough. Doesn't work for inline listeners.

yes, we'd better not use inline listener, cus .off(name,handler) func works based on the handler func address(inner logic: remove the same address listener from listener list) , if u use inline listener, then u cant pass the same address handler to .off func.