format: apply repo prettier (3.8.1) to the folded skills tree
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:
@@ -17,17 +17,17 @@ sometimes you may get the default initial value, not the real value stored in st
|
||||
beginning.
|
||||
|
||||
```ts
|
||||
import { useStorageAsync } from '@vueuse/core'
|
||||
import { useStorageAsync } from '@vueuse/core';
|
||||
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage)
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage);
|
||||
|
||||
// accessToken.value may be empty before the async storage is ready
|
||||
console.log(accessToken.value) // ""
|
||||
console.log(accessToken.value); // ""
|
||||
|
||||
setTimeout(() => {
|
||||
// After some time, the async storage is ready
|
||||
console.log(accessToken.value) // "the real value stored in storage"
|
||||
}, 500)
|
||||
console.log(accessToken.value); // "the real value stored in storage"
|
||||
}, 500);
|
||||
```
|
||||
|
||||
In this case, you can wait the storage prepared, the returned value is also a `Promise`,
|
||||
@@ -35,100 +35,95 @@ so you can wait it resolved in your template or script.
|
||||
|
||||
```ts
|
||||
// Use top-level await if your environment supports it
|
||||
const accessToken = await useStorageAsync('access.token', '', SomeAsyncStorage)
|
||||
const accessToken = await useStorageAsync('access.token', '', SomeAsyncStorage);
|
||||
|
||||
console.log(accessToken.value) // "the real value stored in storage"
|
||||
console.log(accessToken.value); // "the real value stored in storage"
|
||||
```
|
||||
|
||||
If you must wait multiple storages, put them into a `Promise.allSettled()`
|
||||
|
||||
```ts
|
||||
router.onReady(async () => {
|
||||
await Promise.allSettled([
|
||||
accessToken,
|
||||
refreshToken,
|
||||
userData,
|
||||
])
|
||||
await Promise.allSettled([accessToken, refreshToken, userData]);
|
||||
|
||||
app.mount('app')
|
||||
})
|
||||
app.mount('app');
|
||||
});
|
||||
```
|
||||
|
||||
There is a callback named `onReady` in options:
|
||||
|
||||
```ts
|
||||
import { useStorageAsync } from '@vueuse/core'
|
||||
import { useStorageAsync } from '@vueuse/core';
|
||||
|
||||
// Use ES2024 Promise.withResolvers, you may use any Deferred object or EventBus to do same thing.
|
||||
const { promise, resolve } = Promise.withResolvers()
|
||||
const { promise, resolve } = Promise.withResolvers();
|
||||
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
|
||||
onReady(value) {
|
||||
resolve(value)
|
||||
}
|
||||
})
|
||||
resolve(value);
|
||||
},
|
||||
});
|
||||
|
||||
// At main.ts
|
||||
router.onReady(async () => {
|
||||
// Let's wait accessToken loaded
|
||||
await promise
|
||||
await promise;
|
||||
|
||||
// Now accessToken has loaded, we can safely mount our app
|
||||
|
||||
app.mount('app')
|
||||
})
|
||||
app.mount('app');
|
||||
});
|
||||
```
|
||||
|
||||
Simply use `resolve` as callback:
|
||||
|
||||
```ts
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
|
||||
onReady: resolve
|
||||
})
|
||||
onReady: resolve,
|
||||
});
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseStorageAsyncOptions<T>
|
||||
extends Omit<UseStorageOptions<T>, "serializer"> {
|
||||
export interface UseStorageAsyncOptions<T> extends Omit<UseStorageOptions<T>, 'serializer'> {
|
||||
/**
|
||||
* Custom data serialization
|
||||
*/
|
||||
serializer?: SerializerAsync<T>
|
||||
serializer?: SerializerAsync<T>;
|
||||
/**
|
||||
* On first value loaded hook.
|
||||
*/
|
||||
onReady?: (value: T) => void
|
||||
onReady?: (value: T) => void;
|
||||
}
|
||||
export declare function useStorageAsync(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<string>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<string>,
|
||||
): RemovableRef<string> & Promise<RemovableRef<string>>
|
||||
): RemovableRef<string> & Promise<RemovableRef<string>>;
|
||||
export declare function useStorageAsync(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<boolean>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<boolean>,
|
||||
): RemovableRef<boolean> & Promise<RemovableRef<boolean>>
|
||||
): RemovableRef<boolean> & Promise<RemovableRef<boolean>>;
|
||||
export declare function useStorageAsync(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<number>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<number>,
|
||||
): RemovableRef<number> & Promise<RemovableRef<number>>
|
||||
): RemovableRef<number> & Promise<RemovableRef<number>>;
|
||||
export declare function useStorageAsync<T>(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<T>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<T>,
|
||||
): RemovableRef<T> & Promise<RemovableRef<T>>
|
||||
): RemovableRef<T> & Promise<RemovableRef<T>>;
|
||||
export declare function useStorageAsync<T = unknown>(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<null>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<T>,
|
||||
): RemovableRef<T> & Promise<RemovableRef<T>>
|
||||
): RemovableRef<T> & Promise<RemovableRef<T>>;
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user