Prevent $emit from emitting more than once in Vue

Question

I have an emit call within my Vue project to update search results, but the emit is being called at least 4 times, because the emit call is defined at various spots, so the data is sometimtes emitted with it and at other spots it is not.

I am using a global bus to perform an emit.

this.$root.bus.$emit('resetValuesInInfiniteLoader', filteredEntities);

this.$root.bus.$on('resetValuesInInfiniteLoader', function (filteredEntities) {});

I tried to name the emits calls differently, and also tried to use a different global vue bus but both options did not really work well. Any idea how I can do this in an efficient manner so that the $emit is always only called once? How do I need to set it up to ensure that the emit is always only called once? I also tried using $once, which did not work, or tried to destroy the $emit. Can someone give me a small fiddle example or so maybe so I understand how to do this in the right way?

Answer 1

I went with using vuex store, it seems a lot easier to communicate with any component within the application, has the advantage of global communication, yet does not have the caveat of sending multiple actions such as emit events