fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.5 KiB
3.5 KiB
category
| category |
|---|
| State |
useAsyncState
Reactive async state. Will not block your setup function and will trigger changes once the promise is ready. The state is a shallowRef by default.
Usage
import { useAsyncState } from '@vueuse/core';
import axios from 'axios';
const { state, isReady, isLoading } = useAsyncState(
axios.get('https://jsonplaceholder.typicode.com/todos/1').then((t) => t.data),
{ id: null },
);
Manually trigger the async function
You can also trigger it manually. This is useful when you want to control when the async function is executed.
<script setup lang="ts">
import { useAsyncState } from '@vueuse/core';
const { state, execute, executeImmediate } = useAsyncState(action, '', { immediate: false });
async function action(event) {
await new Promise((resolve) => setTimeout(resolve, 500));
return `${event.target.textContent} clicked!`;
}
</script>
<template>
<p>State: {{ state }}</p>
<button class="button" @click="executeImmediate">Execute now</button>
<button class="ml-2 button" @click="(event) => execute(500, event)">Execute with delay</button>
</template>
Type Declarations
export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> {
state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>;
isReady: Ref<boolean>;
isLoading: Ref<boolean>;
error: Ref<unknown>;
execute: (delay?: number, ...args: Params) => Promise<Data>;
executeImmediate: (...args: Params) => Promise<Data>;
}
export type UseAsyncStateReturn<
Data,
Params extends any[],
Shallow extends boolean,
> = UseAsyncStateReturnBase<Data, Params, Shallow> &
PromiseLike<UseAsyncStateReturnBase<Data, Params, Shallow>>;
export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
/**
* Delay for the first execution of the promise when "immediate" is true. In milliseconds.
*
* @default 0
*/
delay?: number;
/**
* Execute the promise right after the function is invoked.
* Will apply the delay if any.
*
* When set to false, you will need to execute it manually.
*
* @default true
*/
immediate?: boolean;
/**
* Callback when error is caught.
*/
onError?: (e: unknown) => void;
/**
* Callback when success is caught.
* @param {D} data
*/
onSuccess?: (data: D) => void;
/**
* Sets the state to initialState before executing the promise.
*
* This can be useful when calling the execute function more than once (for
* example, to refresh data). When set to false, the current state remains
* unchanged until the promise resolves.
*
* @default true
*/
resetOnExecute?: boolean;
/**
* Use shallowRef.
*
* @default true
*/
shallow?: Shallow;
/**
*
* An error is thrown when executing the execute function
*
* @default false
*/
throwError?: boolean;
}
/**
* Reactive async state. Will not block your setup function and will trigger changes once
* the promise is ready.
*
* @see https://vueuse.org/useAsyncState
* @param promise The promise / async function to be resolved
* @param initialState The initial state, used until the first evaluation finishes
* @param options
*/
export declare function useAsyncState<
Data,
Params extends any[] = any[],
Shallow extends boolean = true,
>(
promise: Promise<Data> | ((...args: Params) => Promise<Data>),
initialState: MaybeRef<Data>,
options?: UseAsyncStateOptions<Shallow, Data>,
): UseAsyncStateReturn<Data, Params, Shallow>;