type: fix useFetch ref type (#194)

* type: fix ref readonly * docs: fix dep path
InhiblabCore · Apr 27, 2024 · 394f0f6 · 394f0f6
1 parent c9d217d
commit 394f0f6
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 25 deletions.
diff --git a/packages/hooks/src/useFetchs/demo/demo.vue b/packages/hooks/src/useFetchs/demo/demo.vue
@@ -2,20 +2,22 @@
   <div>
     <div v-for="item in datas" :key="item.key" class="item">
       {{ item.loading ? 'loading' : '' }}
-      {{ item.data }}
+      {{ item.data?.desc }}
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, watchEffect } from 'vue'
+  import { computed, watchEffect, ref } from 'vue'
   import { useFetchs } from 'vue-hooks-plus'
 
-  async function getUsername(params: { desc: string }): Promise<string> {
+  async function getUsername(params: { desc: string }): Promise<{ desc: string }> {
     return new Promise(resolve => {
       setTimeout(
         () => {
-          resolve(`VueHooks Plus ${params.desc}`)
+          resolve({
+            desc: `VueHooks Plus ${params.desc}`,
+          })
         },
         params.desc === 'SSS' ? 4000 : 2000,
       )
@@ -34,6 +36,9 @@
     },
   )
 
+  const name = ref()
+  name.value = fetchs?.value?.[0]?.data?.desc
+
   watchEffect(() => {
     arr.forEach(item => {
       fetchRun({ desc: item })

diff --git a/packages/hooks/src/useFetchs/index.ts b/packages/hooks/src/useFetchs/index.ts
@@ -1,4 +1,4 @@
-import { createApp, defineComponent, readonly, ref, UnwrapRef, watch, watchEffect } from 'vue'
+import { createApp, defineComponent, ref, UnwrapRef, watch, watchEffect } from 'vue'
 import { UseRequestService, UseRequestOptions } from '../useRequest/types'
 import useRequest from '../useRequest'
 
@@ -20,7 +20,7 @@ const DEFAULT_KEY = 'VUE_HOOKS_PLUS_USE_REQUEST_DEFAULT_KEY'
 type FetchType<TData, TParams> = Record<
   string | number,
   {
-    data: TData | undefined
+    data: Readonly<TData> | undefined
     params: TParams
     loading: boolean
     key: string | number
@@ -49,7 +49,6 @@ function useFetchs<TData, TParams>(
   const newFetchs = ref<Fetchs>({})
 
   const setFetchs = (fetchs_: Fetchs) => {
-    // @ts-ignore
     newFetchs.value = fetchs_
   }
 
@@ -68,10 +67,9 @@ function useFetchs<TData, TParams>(
       watchEffect(() => {
         fetchs.value[cacheKey as string] = {
           key: cacheKey,
+          data: data?.value,
           // @ts-ignore
-          data: data?.value as UnwrapRef<TData>,
-          // @ts-ignore
-          params: params.value as UnwrapRef<TParams>,
+          params: params.value,
           loading: loading.value as UnwrapRef<boolean>,
         }
         setFetchs(fetchs.value as Fetchs)
@@ -85,25 +83,24 @@ function useFetchs<TData, TParams>(
           newParams = undefined,
           newLoading = false,
           key = DEFAULT_KEY,
-        ] = curr
+        ] = curr;
 
-        const fetchKey = keyIsStringOrNumber(key) ? key : DEFAULT_KEY
+        const fetchKey = keyIsStringOrNumber(key) ? key : DEFAULT_KEY;
 
         fetchs.value[fetchKey] = {
           key: fetchKey,
+          data: newData,
           // @ts-ignore
-          data: newData as UnwrapRef<TData>,
-          // @ts-ignore
-          params: newParams as UnwrapRef<TParams>,
-          loading: newLoading as UnwrapRef<boolean>,
-        }
-        setFetchs(fetchs.value as Fetchs)
+          params: newParams,
+          loading: newLoading,
+        };
+        setFetchs(fetchs.value);
       })
     })
   }
 
   return {
-    fetchs: readonly(newFetchs),
+    fetchs: newFetchs,
     fetchRun,
   }
 }

diff --git a/packages/hooks/src/useInfiniteScroll/demo/demo.vue b/packages/hooks/src/useInfiniteScroll/demo/demo.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { useInfiniteScroll } from '../../index'
+  import { useInfiniteScroll } from 'vue-hooks-plus'
 
   interface Result {
     list: string[]

diff --git a/packages/hooks/src/useInfiniteScroll/demo/demo1.vue b/packages/hooks/src/useInfiniteScroll/demo/demo1.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
   import { computed } from 'vue'
-  import { useInfiniteScroll } from '../../index'
+  import { useInfiniteScroll } from 'vue-hooks-plus'
 
   interface Result {
     list: string[]

diff --git a/packages/hooks/src/useInfiniteScroll/demo/demo2.vue b/packages/hooks/src/useInfiniteScroll/demo/demo2.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useInfiniteScroll } from '../../index'
+  import { useInfiniteScroll } from 'vue-hooks-plus'
 
   interface Result {
     list: string[]

diff --git a/packages/hooks/src/useInfiniteScroll/demo/demo3.vue b/packages/hooks/src/useInfiniteScroll/demo/demo3.vue
@@ -3,7 +3,8 @@
     <vhp-button @click="() => reload()" style="margin-bottom: 8px;"> Reset </vhp-button>
     <div style="margin-bottom: 16px;"
     >Change will be reset：<input type="text" v-model="text"
-    ></div>
+    /></div>
+
     <p v-if="loading" />
     <div
       v-for="item in data?.list"
@@ -28,7 +29,7 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useInfiniteScroll } from '../../index'
+  import { useInfiniteScroll } from 'vue-hooks-plus'
 
   interface Result {
     list: string[]

diff --git a/packages/hooks/src/useInfiniteScroll/demo/demo4.vue b/packages/hooks/src/useInfiniteScroll/demo/demo4.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { useInfiniteScroll, useRequest } from '../../index'
+  import { useInfiniteScroll, useRequest } from 'vue-hooks-plus'
 
   interface Result {
     list: string[]