Vue Router sayfaları arasında geçiş yapmak, VueJS takılı () üzerinde birden fazla olay yangına neden olur

Question

Vue CLI projesini ve Vue CLI Plugin Electron Builder'ı kullandığım bir Electron projesi üzerinde çalışıyorum . Son zamanlarda bulduğum garip bir hata dışında her şey harika çalışıyor.

Sayfalar arasında (Vue Router) her gezindiğimde, component mounted()özelliğinden dinlediğim olay iki katına çıkıyor. Aslında N+1sorun bu.

konuyu daha net anlatmak için iki Home.vueve HelloWorld.vuebileşen var. Bileşenden Home.vue, mainbir düğmeye her tıkladığımda event.reply()ve aynı bileşen mounted()özelliğinden dinlediğimde sürece bir olay gönderiyorum . Bu aşamada tamamen beklendiği gibi.

Ben gitmek ne zaman Ancak, HelloWorldsayfa ve geri dönmek Homeyeniden sayfa ve ben göndermek ve almak için düğmeye tıkladığınızda eventgelen mainsüreçte, sadece tek bir görmüyorum eventben bir kez sadece tıklayın rağmen ama iki bkz eventcevap . Sayfalar arasında tekrar geçiş yaparsam, üç eventyanıt ve benzer bir N+1sorun göreceğim .

Size kolaylık sağlamak için sorunu açıkça gösterecek hızlı bir GIF hazırladım.

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

Vue Router'da özel bir şeyim yok ve sadece Vue CLI ile gelen varsayılan iskele. Yukarıdaki kod parçacığında görebileceğiniz gibi, tek yaptığım bir düğmeyi tıklarken bir olay göndermek ve aynı bileşen mounted()özelliğinden aynı olay yanıtını dinlemek .

Stack Overflow'da da benzer bir konu buldum ancak kendim çözemedim. Kodumda neyin yanlış olduğuna dair hiçbir fikrim yok 🥱

Answer 1

Bileşen yok edildiğinde olay işleyicisinin kaydını silmeniz gerekir, aksi takdirde bileşen her takıldığında aynı olay işleyicisini tekrar tekrar kaydetmeye devam edersiniz.

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

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

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