feat(useAsyncState): allow initial value to be a ref (#4992)

43081j · web-flow · commit e38e8d9c35ab · 2025-08-27T15:21:09.000Z
diff --git a/packages/core/useAsyncState/index.test.ts b/packages/core/useAsyncState/index.test.ts
@@ -1,6 +1,6 @@
 import { promiseTimeout } from '@vueuse/shared'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { useAsyncState } from './index'
 
 describe('useAsyncState', () => {
@@ -110,4 +110,13 @@ describe('useAsyncState', () => {
     expect(mockReportError).toHaveBeenCalledWith(error)
     globalThis.reportError = originalReportError
   })
+
+  it('supports initialState as shallow ref', async () => {
+    const initialState = shallowRef(200)
+    const asyncValue = Promise.resolve(100)
+    const { state } = useAsyncState(asyncValue, initialState)
+    await asyncValue
+    expect(state.value).toBe(100)
+    expect(initialState).toBe(state)
+  })
 })
diff --git a/packages/core/useAsyncState/index.ts b/packages/core/useAsyncState/index.ts
@@ -1,6 +1,6 @@
-import type { Ref, ShallowRef, UnwrapRef } from 'vue'
+import type { MaybeRef, Ref, ShallowRef, UnwrapRef } from 'vue'
 import { noop, promiseTimeout, until } from '@vueuse/shared'
-import { ref as deepRef, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef, toValue } from 'vue'
 
 export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> {
   state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
@@ -81,7 +81,7 @@ export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
  */
 export function useAsyncState<Data, Params extends any[] = any[], Shallow extends boolean = true>(
   promise: Promise<Data> | ((...args: Params) => Promise<Data>),
-  initialState: Data,
+  initialState: MaybeRef<Data>,
   options?: UseAsyncStateOptions<Shallow, Data>,
 ): UseAsyncStateReturn<Data, Params, Shallow> {
   const {
@@ -100,7 +100,7 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
 
   async function execute(delay = 0, ...args: any[]) {
     if (resetOnExecute)
-      state.value = initialState
+      state.value = toValue(initialState)
     error.value = undefined
     isReady.value = false
     isLoading.value = true
