feat: optimized useRequest refreshDeps type && docs opt

feat: optimized useRequest refreshDeps type && docs opt

Author: inhiblab

packages/hooks/src/index.ts

@@ -17,7 +17,6 @@ import useFormatResult from './useFormatResult'
 import useFetchs from './useFetchs'
 import useFullscreen from './useFullscreen'
 import useHover from './useHover'
-// import usePreview from './usePreview'
 import usePrevious from './usePrevious'
 import useInterval from './useInterval'
 import useInfiniteScroll from './useInfiniteScroll'
@@ -82,7 +81,6 @@ export {
   useMedia,
   useMouse,
   useNetwork,
-  // usePreview,
   usePrevious,
   useSessionStorageState,
   useSet,

packages/hooks/src/useDarkMode/index.ts

@@ -16,7 +16,7 @@ export default function useDarkMode(): [ComputedRef<boolean>, (value?: unknown)
   })
 
   watchEffect(() => {
-    const className = 'dark-mode'
+    const className = '[vue-hooks-plus]-dark-mode'
     const element = window.document.body
     if (enabled.value) {
       element.classList.add(className)

packages/hooks/src/useRequest/docs/refreshDeps/demo/demo.vue

@@ -4,7 +4,7 @@
       <vhp-button type="button" @click="count++">count is {{ count }}</vhp-button>
       <div style="opacity: 0.6;"> count !==0 and count !==5 ready is true </div>
     </div>
-    <br>
+    <br />
     <vhp-button @click="() => (id = 1)">Change ID = 1</vhp-button>
     <vhp-button @click="() => (id = 2)" style="margin-left: 16px;">Change ID = 2</vhp-button>
     <vhp-button @click="() => (store.id = 1)" style="margin-left: 16px;">

packages/hooks/src/useRequest/index.ts

@@ -1,6 +1,5 @@
 import useRequest from './useRequest'
 import useRequestProvider from './useRequestProvider'
-// import createUseRequest from './createUseRequest'
 import { clearCache as clearUseRequestCache } from './utils/cache'
 
 import useRequestDevToolsPlugin from './devtools'

packages/hooks/src/useRequest/types.ts

@@ -1,4 +1,4 @@
-import { Ref, WatchSource } from 'vue'
+import { Ref, watch } from 'vue'
 import { CachedData } from './utils/cache'
 import UseRequestFetch from './Fetch'
 
@@ -97,7 +97,7 @@ export interface UseRequestBasicOptions<TData, TParams extends unknown[]> {
   /**
    * Dependent on responsive objects, and the `watch` incoming listener object usage for `vue`.
    */
-  refreshDeps?: WatchSource[] | boolean
+  refreshDeps?: Parameters<typeof watch>[0][] | boolean
   refreshDepsAction?: () => void
 
   /**
@@ -106,10 +106,13 @@ export interface UseRequestBasicOptions<TData, TParams extends unknown[]> {
    */
   loadingDelay?: number | Ref<number>
 
+  /**
+   * open vue devtools,devKey must existence and uniqueness.
+   */
   devKey?: string
 
   /**
-   * Format the request results, which recommend to use `useFormatResult`
+   * Format the request results, which recommend to use `useFormatResult`.
    * @param data TData
    * @returns unknown need cover TData
    */

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, onUnmounted, inject, UnwrapRef, watchEffect, computed, isRef, onMounted, unref } from 'vue'
+import { ref, reactive, toRefs, onUnmounted, inject, UnwrapRef, watchEffect, computed, isRef, unref } from 'vue'
 
 import Fetch from './Fetch'
 import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
@@ -93,12 +93,10 @@ function useRequestImplement<TData, TParams extends any[]>(
   })
 
   // manual
-  onMounted(() => {
-    if (!manual && fetchInstance.options.refreshDeps !== true) {
-      const params = fetchInstance.state.params || options.defaultParams || []
-      if (unref(ready)) fetchInstance.run(...(params as TParams))
-    }
-  })
+  if (!manual && fetchInstance.options.refreshDeps !== true) {
+    const params = fetchInstance.state.params || options.defaultParams || []
+    if (unref(ready)) fetchInstance.run(...(params as TParams))
+  }
 
   // onUnmounted cancel request
   onUnmounted(() => {