fix: unsubscribe on unmount for emiiter events #29 (#32)

Author: antonreshetov

src/renderer/components/editor/TheEditor.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import type { Ace } from 'ace-builds'
 import ace from 'ace-builds'
 import './module-resolver'
@@ -271,6 +271,10 @@ watch(
 
 emitter.on('snippet:format', () => format())
 
+onUnmounted(() => {
+  emitter.off('snippet:format')
+})
+
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })

src/renderer/components/sidebar/SidebarList.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref } from 'vue'
 import type { Tab, Tabs } from '@shared/types/renderer/sidebar'
 import { emitter, setScrollPosition } from '@/composable'
 
@@ -90,6 +90,10 @@ emitter.on('scroll-to:folder', id => {
     }
   })
 })
+
+onUnmounted(() => {
+  emitter.off('scroll-to:folder')
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/sidebar/TheFolder.vue

@@ -23,7 +23,7 @@
 import { emitter } from '@/composable'
 import { useFolderStore } from '@/store/folders'
 import { onClickOutside } from '@vueuse/core'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 
 interface Props {
   id: string
@@ -62,6 +62,10 @@ watch(isEdit, () => {
 emitter.on('folder:rename', id => {
   if (id === props.id) isEdit.value = true
 })
+
+onUnmounted(() => {
+  emitter.off('folder:rename')
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/snippets/SnippetHeader.vue

@@ -36,7 +36,7 @@
 import { emitter, onAddNewFragment, onCopySnippet } from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { useAppStore } from '@/store/app'
 
 const snippetStore = useSnippetStore()
@@ -62,6 +62,10 @@ const onClickMarkdownPreview = () => {
 emitter.on('snippet:focus-name', () => {
   inputRef.value?.select()
 })
+
+onUnmounted(() => {
+  emitter.off('snippet:focus-name')
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/snippets/SnippetList.vue

@@ -34,7 +34,7 @@
 import { emitter, setScrollPosition } from '@/composable'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import interact from 'interactjs'
 import { store } from '@/electron'
 
@@ -73,6 +73,10 @@ watch(
 emitter.on('folder:click', () => {
   setScrollPosition(bodyRef.value!, 0)
 })
+
+onUnmounted(() => {
+  emitter.off('folder:click')
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/snippets/SnippetListHeader.vue

@@ -27,7 +27,7 @@
 import { emitter, onAddNewSnippet } from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { track } from '@/electron'
 
 const snippetStore = useSnippetStore()
@@ -52,6 +52,10 @@ const onReset = () => {
 emitter.on('search:focus', () => {
   inputRef.value?.focus()
 })
+
+onUnmounted(() => {
+  emitter.off('search:focus')
+})
 </script>
 
 <style lang="scss" scoped>