mosaicstack/stack
25
0
Fork 1
Code Issues 343 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
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.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/vueuse-functions/references/useAsyncState.md
+26 -36
View File
@@ -9,15 +9,13 @@ Reactive async state. Will not block your setup function and will trigger change
## Usage
```ts
import { useAsyncState } from '@vueuse/core'
import axios from 'axios'
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),
axios.get('https://jsonplaceholder.typicode.com/todos/1').then((t) => t.data),
{ id: null },
)
);
```
### Manually trigger the async function
@@ -26,57 +24,49 @@ You can also trigger it manually. This is useful when you want to control when t
```vue
<script setup lang="ts">
import { useAsyncState } from '@vueuse/core'
import { useAsyncState } from '@vueuse/core';
const { state, execute, executeImmediate } = useAsyncState(action, '', { immediate: false })
const { state, execute, executeImmediate } = useAsyncState(action, '', { immediate: false });
async function action(event) {
await new Promise(resolve => setTimeout(resolve, 500))
return `${event.target.textContent} clicked!`
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="button" @click="executeImmediate">Execute now</button>
<button class="ml-2 button" @click="event => execute(500, event)">
Execute with delay
</button>
<button class="ml-2 button" @click="(event) => execute(500, event)">Execute with delay</button>
</template>
```
## Type Declarations
```ts
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 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>>
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
delay?: number;
/**
* Execute the promise right after the function is invoked.
* Will apply the delay if any.
@@ -85,16 +75,16 @@ export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
*
* @default true
*/
immediate?: boolean
immediate?: boolean;
/**
* Callback when error is caught.
*/
onError?: (e: unknown) => void
onError?: (e: unknown) => void;
/**
* Callback when success is caught.
* @param {D} data
*/
onSuccess?: (data: D) => void
onSuccess?: (data: D) => void;
/**
* Sets the state to initialState before executing the promise.
*
@@ -104,20 +94,20 @@ export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
*
* @default true
*/
resetOnExecute?: boolean
resetOnExecute?: boolean;
/**
* Use shallowRef.
*
* @default true
*/
shallow?: Shallow
shallow?: Shallow;
/**
*
* An error is thrown when executing the execute function
*
* @default false
*/
throwError?: boolean
throwError?: boolean;
}
/**
* Reactive async state. Will not block your setup function and will trigger changes once
@@ -136,5 +126,5 @@ export declare function useAsyncState<
promise: Promise<Data> | ((...args: Params) => Promise<Data>),
initialState: MaybeRef<Data>,
options?: UseAsyncStateOptions<Shallow, Data>,
): UseAsyncStateReturn<Data, Params, Shallow>
): UseAsyncStateReturn<Data, Params, Shallow>;
```