Il passaggio tra le pagine del router Vue provoca più eventi su VueJS montato ()

Aug 16 2020

Sto lavorando a un progetto Electron in cui utilizzo il progetto Vue CLI e Vue CLI Plugin Electron Builder . Tutto funziona alla grande tranne uno strano bug che ho trovato di recente.

Ogni volta che navigo tra le pagine (Vue Router), l'evento che ascolto dalla mounted()proprietà del componente diventa doppio. In realtà è il N+1problema.

per descrivere il problema in modo più chiaro, ho due componenti Home.vuee HelloWorld.vue. Dal Home.vuecomponente, invio un evento al mainprocesso ogni volta che faccio clic su un pulsante e ascolto event.reply()dalla stessa mounted()proprietà del componente . È completamente come previsto in questa fase.

Tuttavia, ogni volta che vado alla HelloWorldpagina e torno nuovamente alla Homepagina e quando faccio clic sul pulsante per inviare e ricevere il eventdal mainprocesso, non vedo solo un singolo eventanche se faccio clic una sola volta ma vedo due eventrisposte . Se passo di nuovo da una pagina all'altra, vedrò tre eventrisposte e così via N+1.

Per tua comodità, ho creato una rapida GIF che mostrerà chiaramente il problema.

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

Non ho nulla di speciale sul router Vue ed è solo lo scaffolding predefinito fornito con Vue CLI. Come puoi vedere nello snippet di codice sopra, tutto ciò che sto facendo è semplicemente inviare un evento quando si fa clic su un pulsante e si ascolta la stessa risposta dell'evento dalla stessa mounted()proprietà del componente .

Ho anche trovato un argomento simile su Stack Overflow ma non sono riuscito a capirlo da solo. Non ho idea di cosa c'è che non va nel mio codice 🥱

Risposte

2 DecadeMoon Aug 16 2020 at 19:56

È necessario annullare la registrazione del gestore eventi quando il componente viene distrutto, altrimenti continuerai a registrare lo stesso gestore eventi ancora e ancora ogni volta che il componente viene montato.

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

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

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