Переключение между страницами Vue Router вызывает множественное срабатывание событий на VueJS connected ()

Question

Я работаю над проектом Electron, где использую проект Vue CLI и плагин Vue CLI Electron Builder . Все работает отлично, кроме странной ошибки, которую я недавно обнаружил.

Каждый раз, когда я перемещаюсь между страницами (Vue Router), событие, которое я прослушиваю из mounted()свойства компонента, становится двойным. На самом деле N+1проблема.

чтобы описать проблему более четко, у меня есть два Home.vueи HelloWorld.vueкомпоненты. Из Home.vueкомпонента я отправляю событие mainпроцессу всякий раз, когда нажимаю кнопку и прослушиваю event.reply()то же mounted()свойство компонента . На данном этапе все полностью соответствует ожиданиям.

Однако всякий раз, когда я перехожу на HelloWorldстраницу и снова переключаюсь на Homeстраницу, и когда я нажимаю кнопку для отправки и получения eventот mainпроцесса, я вижу не только один, eventхотя я нажимаю только один раз, но я вижу два eventответа . Если я снова переключусь между страницами, я увижу три eventответа и т N+1. Д.

Для вашего удобства я сделал быстрый GIF-файл, который ясно покажет проблему.

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, это просто стандартные строительные леса, которые поставляются с Vue CLI. Как вы можете видеть в приведенном выше фрагменте кода, все, что я делаю, это просто отправляю событие при нажатии кнопки и прослушивании того же ответа на событие от того же mounted()свойства компонента .

Я также нашел похожую тему на Stack Overflow, но сам не мог понять. Я понятия не имею, что не так с моим кодом 🥱

Answer 1

Вам нужно отменить регистрацию обработчика событий, когда компонент будет уничтожен, иначе вы просто продолжите регистрировать один и тот же обработчик событий снова и снова каждый раз, когда компонент монтируется.

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

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

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