El cambio entre las páginas del enrutador de Vue provoca el disparo de múltiples eventos en VueJS montado ()

Aug 16 2020

Estoy trabajando en un proyecto de Electron donde utilizo el proyecto Vue CLI y el Vue CLI Plugin Electron Builder . Todo funciona muy bien, excepto un error extraño que encontré recientemente.

Siempre que navego entre páginas (Vue Router), el evento que escucho de la mounted()propiedad del componente se vuelve doble. De hecho, es el N+1problema.

para describir el problema más claramente, tengo dos componentes Home.vuey HelloWorld.vue. Desde el Home.vuecomponente, envío un evento al mainproceso cada vez que hago clic en un botón y escucho event.reply()desde la misma mounted()propiedad del componente . Es completamente como se esperaba en esta etapa.

Sin embargo, cada vez que voy a la HelloWorldpágina y vuelvo a la Homepágina de nuevo y cuando hago clic en el botón para enviar y recibir el eventdel mainproceso, no solo veo uno event, aunque solo hago clic una vez, sino que veo dos eventrespuestas. . Si vuelvo a cambiar de página, veré tres eventrespuestas y así sucesivamente N+1.

Para tu comodidad, hice un GIF rápido que mostrará el problema con claridad.

Home.vue

<template>
  <div class="home">
    <button @click="send()">Home</button>
  </div>
</template>

<script>
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");
});

No tengo nada especial en el enrutador Vue y es solo un andamio predeterminado que viene con la CLI de Vue. Como puede ver en el fragmento de código anterior, todo lo que estoy haciendo es enviar un evento al hacer clic en un botón y escuchar la misma respuesta de evento desde la misma mounted()propiedad del componente .

También encontré un tema similar en Stack Overflow pero no pude resolverlo por mí mismo. No tengo ni idea de lo que está mal en mi código 🥱

Respuestas

2 DecadeMoon Aug 16 2020 at 19:56

Necesita anular el registro del controlador de eventos cuando se destruye el componente; de ​​lo contrario, seguirá registrando el mismo controlador de eventos una y otra vez cada vez que se monte el componente.

mounted() {
  window.ipcRenderer.on('home:reply', this.handleHomeReply)
},

destroyed() {
  window.ipcRenderer.off('home:reply', this.handleHomeReply)
},

methods: {
  handleHomeReply(event) {
    console.log(event)
  }
}