refactor: use onScopeDispose instead of onUnmounted. #239

Author: John60676

package.json

@@ -110,7 +110,7 @@
     "typescript": "^4.0.5",
     "vite": "^2.1.5",
     "vite-plugin-vue2": "^1.9.2",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-template-compiler": "^2.6.14",
     "vue2": "npm:vue@2"
   },

src/core/plugins/useCachePlugin.ts

@@ -1,7 +1,7 @@
-import { onUnmounted, ref } from 'vue-demi';
+import { ref } from 'vue-demi';
 
 import { definePlugin } from '../definePlugin';
-import { isFunction } from '../utils';
+import { isFunction, onScopeDisposeCompatible } from '../utils';
 import type { CacheData } from '../utils/cache';
 import { getCache, setCache } from '../utils/cache';
 import { getCacheQuery, setCacheQuery } from '../utils/cacheQuery';
@@ -68,7 +68,7 @@ export default definePlugin(
       unSubscribe.value = subscribeCache();
     }
 
-    onUnmounted(() => {
+    onScopeDisposeCompatible(() => {
       unSubscribe.value();
     });
 

src/core/plugins/usePollingPlugin.ts

@@ -1,7 +1,13 @@
-import { computed, onUnmounted, ref, watch } from 'vue-demi';
+import { computed, ref, watch } from 'vue-demi';
 
 import { definePlugin } from '../definePlugin';
-import { isDocumentVisibility, isNil, isOnline, refToRaw } from '../utils';
+import {
+  isDocumentVisibility,
+  isNil,
+  isOnline,
+  onScopeDisposeCompatible,
+  refToRaw,
+} from '../utils';
 import subscriber from '../utils/listener';
 import type { Timeout } from '../utils/types';
 
@@ -76,7 +82,7 @@ export default definePlugin(
       addUnsubscribeList(subscriber('RECONNECT_LISTENER', rePolling));
     }
 
-    onUnmounted(() => {
+    onScopeDisposeCompatible(() => {
       unsubscribeList.forEach(unsubscribe => unsubscribe());
     });
 

src/core/plugins/useRefreshOnWindowFocus.ts

@@ -1,7 +1,7 @@
-import { computed, onUnmounted, watchEffect } from 'vue-demi';
+import { computed, watchEffect } from 'vue-demi';
 
 import { definePlugin } from '../definePlugin';
-import { refToRaw } from '../utils';
+import { onScopeDisposeCompatible, refToRaw } from '../utils';
 import limitTrigger from '../utils/limitTrigger';
 import subscriber from '../utils/listener';
 
@@ -32,7 +32,7 @@ export default definePlugin(
       }
     });
 
-    onUnmounted(() => {
+    onScopeDisposeCompatible(() => {
       unsubscribe();
     });
 

src/core/useQuery.ts

@@ -1,4 +1,4 @@
-import { inject, onUnmounted } from 'vue-demi';
+import { getCurrentInstance, inject } from 'vue-demi';
 
 import { getGlobalOptions, GLOBAL_OPTIONS_PROVIDE_KEY } from './config';
 import createQuery from './createQuery';
@@ -9,16 +9,20 @@ import type {
   QueryResult,
   Service,
 } from './types';
+import { onScopeDisposeCompatible } from './utils';
 
 function useQuery<R, P extends unknown[]>(
   service: Service<R, P>,
   options: Options<R, P> = {},
   plugins: PluginImplementType<R, P>[],
 ): QueryResult<R, P> {
-  const injectedGlobalOptions = inject<GlobalOptions>(
-    GLOBAL_OPTIONS_PROVIDE_KEY,
-    {},
-  );
+  let injectedGlobalOptions = {};
+  if (getCurrentInstance()) {
+    injectedGlobalOptions = inject<GlobalOptions>(
+      GLOBAL_OPTIONS_PROVIDE_KEY,
+      {},
+    );
+  }
 
   const config = {
     ...getGlobalOptions(),
@@ -38,7 +42,7 @@ function useQuery<R, P extends unknown[]>(
     queryInstance.context.run(...params);
   }
 
-  onUnmounted(() => {
+  onScopeDisposeCompatible(() => {
     queryInstance.context.cancel();
   });
 

src/core/utils/index.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue-demi';
+import { onScopeDispose, version } from 'vue-demi';
 import { isRef } from 'vue-demi';
 
 export const objectToString = Object.prototype.toString;
@@ -80,3 +81,12 @@ export const shallowCopy = <T>(value: T): T => {
     return value;
   }
 };
+
+export const onScopeDisposeCompatible = (fn: () => void) => {
+  if (version.startsWith('3.5')) {
+    // @ts-ignore
+    onScopeDispose(fn, true);
+  } else {
+    onScopeDispose(fn);
+  }
+};