Chuyển đổi giữa các trang Vue Router gây ra nhiều sự kiện cháy trên VueJS mount ()

Question

Tôi đang làm việc trên một dự án Electron trong đó tôi sử dụng dự án Vue CLI và Vue CLI Plugin Electron Builder . Mọi thứ đều hoạt động tốt ngoại trừ một lỗi kỳ lạ mà tôi đã tìm thấy gần đây.

Bất cứ khi nào tôi điều hướng giữa các trang (Bộ định tuyến Vue), sự kiện tôi lắng nghe từ thuộc tính thành phần mounted()sẽ tăng gấp đôi. Đó thực sự là N+1vấn đề.

để mô tả vấn đề rõ ràng hơn, tôi có hai Home.vuevà HelloWorld.vuecác thành phần. Từ Home.vuethành phần, tôi đang gửi một sự kiện đến mainquy trình bất cứ khi nào nhấp vào một nút và lắng nghe event.reply()từ cùng một thuộc tính thành phần mounted(). Nó hoàn toàn như mong đợi ở giai đoạn này.

Tuy nhiên, bất cứ khi nào tôi truy cập HelloWorldtrang và chuyển trở lại Hometrang lần nữa và khi tôi nhấp vào nút để gửi và nhận eventtừ mainquá trình, tôi không chỉ thấy một thông báo eventdù chỉ nhấp một lần mà tôi thấy hai eventphản hồi. . Nếu tôi chuyển đổi giữa các trang một lần nữa, tôi sẽ thấy ba eventcâu trả lời và tương tự như N+1vấn đề.

Để thuận tiện cho bạn, tôi đã tạo một ảnh GIF nhanh để hiển thị rõ vấn đề.

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

Tôi không có bất kỳ điều gì đặc biệt trên Vue Router và nó chỉ là giàn giáo mặc định đi kèm với Vue CLI. Như bạn có thể thấy trong đoạn mã trên, tất cả những gì tôi đang làm chỉ là gửi một sự kiện khi nhấp vào một nút và lắng nghe phản hồi của cùng một sự kiện từ cùng một thuộc tính thành phần mounted().

Tôi cũng đã tìm thấy một chủ đề tương tự trên Stack Overflow nhưng không thể tự tìm ra. Tôi không biết có gì sai trên mã của mình 🥱

Answer 1

Bạn cần hủy đăng ký trình xử lý sự kiện khi thành phần bị phá hủy, nếu không, bạn sẽ tiếp tục đăng ký cùng một trình xử lý sự kiện lặp đi lặp lại mỗi khi thành phần được gắn kết.

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

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

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