Currently, I am immersed in a project using Electron with a Vue CLI setup and the Vue CLI Plugin Electron Builder. The overall functionality is working perfectly fine except for a peculiar bug that has recently surfaced.
The issue arises when navigating between pages using the Vue Router - the event listener in the component's `mounted()` property gets triggered twice, resulting in an 'N+1' problem.
To elaborate on this predicament, within my project, I have two components named `Home.vue` and `HelloWorld.vue`. In `Home.vue`, upon clicking a button, I trigger an event to the main process and listen for the corresponding event reply using the `mounted()` property of the same component. Initially, everything functions as expected.
However, upon switching to the `HelloWorld` page and then returning to the `Home` page, every click of the button not only sends one event but receives two event replies from the main process. This behavior exacerbates when switching back and forth between pages, revealing a pattern resembling the 'N+1' issue.
In order to illustrate the problem more clearly, I have created a GIF showcasing the issue:
Home.vue
<template>
<div class="home">
<button @click="send()">Home</button>
</div>
</template>
// Script section
export default {
name: "Home",
data() {
return {
cause: null
}
},
mounted() {
window.ipcRenderer.on("home:reply", event => console.log(event));
},
methods: {
send() {
window.ipcRenderer.send("home");
}
},
};
</script>
main.js
ipcMain.on("home", event => {
return event.reply("home:reply");
});
My Vue Router configuration is based on the default structure provided by Vue CLI. As evident from the code snippet above, I simply trigger an event upon button click and await the respective event reply using the `mounted()` property within the same component.
I did come across a similar discussion on Stack Overflow here, but unfortunately, I haven't been able to resolve the issue myself. At this point, I'm baffled as to what might be causing this discrepancy in my code 🥱