Vue RS के पन्नों के बीच स्विच करने से VueJS माउंटेड () पर कई इवेंट में आग लग जाती है

Question

मैं एक इलेक्ट्रॉन परियोजना पर काम कर रहा हूं जहां मैं Vue CLI परियोजना और Vue CLI प्लगिन इलेक्ट्रॉन बिल्डर का उपयोग करता हूं । हाल ही में मुझे मिली एक अजीब बग को छोड़कर सब कुछ बढ़िया काम करता है।

जब भी मैं पृष्ठों (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()संपत्ति से उसी घटना के उत्तर को सुन रहा है।

मैंने स्टैक ओवरफ्लो पर भी इसी तरह का विषय पाया, लेकिन यह खुद पता नहीं लगा सका। मेरे पास मेरे कोड what's में क्या गलत है, इसका कोई सुराग नहीं है

Answer 1

जब घटक नष्ट हो जाता है, तो आपको इवेंट हैंडलर को अपंजीकृत करने की आवश्यकता होती है, अन्यथा आप प्रत्येक ईवेंट हैंडलर को फिर से पंजीकृत कर रहे हैं और हर बार घटक माउंट होने पर।

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

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

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