stop watchers during the beforeRouteLeave lifecycle

PrefectHQ · Oct 17, 2022 · 2df6bc5 · 2df6bc5
1 parent 56ee8ef
commit 2df6bc5
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/useRouteQueryParam/useRouteQueryParam.ts b/src/useRouteQueryParam/useRouteQueryParam.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-redeclare */
 import { Ref, ref, watch } from 'vue'
-import { RouteLocationNormalized, useRoute, useRouter } from 'vue-router'
+import { onBeforeRouteLeave, RouteLocationNormalized, useRoute, useRouter } from 'vue-router'
 
 export function useRouteQueryParam(param: string): Ref<string | string[]>
 export function useRouteQueryParam(param: string, defaultValue: string): Ref<string>
@@ -11,15 +11,15 @@ export function useRouteQueryParam(param: string, defaultValue: string | string[
   const initialValue = matchValueType(defaultValue, getRouteQueryParam(route, param) ?? defaultValue)
   const valueRef = ref<string | string[]>(initialValue)
 
-  watch(valueRef, (newValue, oldValue) => {
+  const unwatchValue = watch(valueRef, (newValue, oldValue) => {
     if (isSame(newValue, oldValue)) {
       return
     }
 
     router.push({ query: { ...route.query, [param]: valueRef.value } })
   })
 
-  watch(route, (newRoute, oldRoute) => {
+  const unwatchRoute = watch(route, (newRoute, oldRoute) => {
     const newValue = getRouteQueryParam(newRoute, param) ?? defaultValue
     const oldValue = getRouteQueryParam(oldRoute, param) ?? defaultValue
     const matched = matchValueType(oldValue, newValue)
@@ -29,6 +29,11 @@ export function useRouteQueryParam(param: string, defaultValue: string | string[
     }
   }, { deep: true })
 
+  onBeforeRouteLeave(() => {
+    unwatchValue()
+    unwatchRoute()
+  })
+
   return valueRef
 }