fix: 🔧 use-request ready as parameter, dependent refresh does not update

fix: 🔧 use-request ready as parameter, dependent refresh does not update

Author: inhiblab

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-hooks-plus",
-	"version": "1.5.4",
+	"version": "1.5.5",
 	"description": "Vue hooks library",
 	"files": [
 		"dist",

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

@@ -1,9 +1,10 @@
 <template>
   <div style="margin-top: 16px;">
     <div>
-      <p>id:{{ id }}</p>
-      <p>storeID:{{ store.id }}</p>
+      <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>
     <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;">
@@ -14,28 +15,77 @@
     </vhp-button>
   </div>
   <div style="margin-top: 16px;">Loading：{{ loading ? 'loading' : '' }}</div>
+
   <div style="margin-top: 16px;"
-  >Data Value： <span>{{ data }}</span>
+  >Data Value：
+    <div>
+      <table>
+        <thead>
+          <th>Time</th>
+          <th>Id</th>
+          <th>StoreId</th>
+          <th>Count</th>
+        </thead>
+        <tbody>
+          <tr>
+            <th>{{ data?.time }}</th>
+            <th>{{ data?.id }}</th>
+            <th>{{ data?.storeId }}</th>
+            <th>{{ data?.count }}</th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue'
+  import { ref, reactive, computed } from 'vue'
 
   import { useRequest } from 'vue-hooks-plus'
 
-  function getUsername({ id, storeId }: { id: number; storeId: number }): Promise<string> {
+  function getUsername({
+    id,
+    storeId,
+    count,
+  }: {
+    id: number
+    storeId: number
+    count: number
+  }): Promise<{
+    time: number | string
+    id: number | string
+    storeId: number | string
+    count: number | string
+  }> {
     return new Promise(resolve => {
       setTimeout(() => {
-        resolve(`${String(Date.now())}； \n Params id: ${id} \t； Params storeId: ${storeId}`)
+        resolve({
+          time: Date.now(),
+          id,
+          storeId,
+          count,
+        })
       }, 1000)
     })
   }
   const id = ref(1)
   const store = reactive({
     id: 1,
   })
-  const { data, loading } = useRequest(() => getUsername({ id: id.value, storeId: store.id }), {
-    refreshDeps: [id, () => store.id],
-  })
+  const count = ref(0)
+  const ready = computed(() => count.value !== 0 && count.value !== 5)
+  const { data, loading } = useRequest(
+    () => getUsername({ id: id.value, storeId: store.id, count: count.value }),
+    {
+      initialData: {
+        time: Date.now(),
+        id: '-',
+        count: '-',
+        storeId: '-',
+      },
+      ready,
+      refreshDeps: [id, () => store.id, count],
+    },
+  )
 </script>

packages/hooks/src/useRequest/plugins/useAutoRunPlugin.ts

@@ -1,26 +1,22 @@
-import { isRef, unref, ref, watch } from 'vue'
+import { unref, ref, watch, watchEffect } from 'vue'
 import { FetchState, Plugin } from '../types'
 
 // support refreshDeps & ready
 const useAutoRunPlugin: Plugin<unknown, unknown[]> = (
   fetchInstance,
-  { manual, ready = true, defaultParams = [], refreshDeps = [], refreshDepsAction },
+  { manual, ready = true, refreshDeps = [], refreshDepsAction },
 ) => {
   const hasAutoRun = ref(false)
-  hasAutoRun.value = false
 
-  watch(isRef(ready) ? ready : [], r => {
-    if (!manual && r) {
-      hasAutoRun.value = true
-      fetchInstance.run(...defaultParams)
-    }
+  watchEffect(() => {
+    if (!manual) hasAutoRun.value = unref(ready)
   })
 
   watch(
-    refreshDeps,
-    () => {
-      if (hasAutoRun.value) return
-      if (!manual) {
+    [hasAutoRun, ...refreshDeps],
+    ([autoRun]) => {
+      if (!autoRun) return
+      if (!manual && autoRun) {
         if (refreshDepsAction) {
           refreshDepsAction()
         } else {
@@ -30,6 +26,7 @@ const useAutoRunPlugin: Plugin<unknown, unknown[]> = (
     },
     {
       deep: true,
+      immediate: false,
     },
   )