feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
134
skills/vueuse-functions/references/useStorageAsync.md
Normal file
134
skills/vueuse-functions/references/useStorageAsync.md
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
category: State
|
||||
---
|
||||
|
||||
# useStorageAsync
|
||||
|
||||
Reactive Storage in with async support.
|
||||
|
||||
## Usage
|
||||
|
||||
The basic usage please refer to `useStorage`.
|
||||
|
||||
## Wait First Loaded
|
||||
|
||||
When user entering your app, `useStorageAsync()` will start loading value from an async storage,
|
||||
sometimes you may get the default initial value, not the real value stored in storage at the very
|
||||
beginning.
|
||||
|
||||
```ts
|
||||
import { useStorageAsync } from '@vueuse/core'
|
||||
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage)
|
||||
|
||||
// accessToken.value may be empty before the async storage is ready
|
||||
console.log(accessToken.value) // ""
|
||||
|
||||
setTimeout(() => {
|
||||
// After some time, the async storage is ready
|
||||
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`,
|
||||
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)
|
||||
|
||||
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,
|
||||
])
|
||||
|
||||
app.mount('app')
|
||||
})
|
||||
```
|
||||
|
||||
There is a callback named `onReady` in options:
|
||||
|
||||
```ts
|
||||
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 accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
|
||||
onReady(value) {
|
||||
resolve(value)
|
||||
}
|
||||
})
|
||||
|
||||
// At main.ts
|
||||
router.onReady(async () => {
|
||||
// Let's wait accessToken loaded
|
||||
await promise
|
||||
|
||||
// Now accessToken has loaded, we can safely mount our app
|
||||
|
||||
app.mount('app')
|
||||
})
|
||||
```
|
||||
|
||||
Simply use `resolve` as callback:
|
||||
|
||||
```ts
|
||||
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
|
||||
onReady: resolve
|
||||
})
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseStorageAsyncOptions<T>
|
||||
extends Omit<UseStorageOptions<T>, "serializer"> {
|
||||
/**
|
||||
* Custom data serialization
|
||||
*/
|
||||
serializer?: SerializerAsync<T>
|
||||
/**
|
||||
* On first value loaded hook.
|
||||
*/
|
||||
onReady?: (value: T) => void
|
||||
}
|
||||
export declare function useStorageAsync(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<string>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<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>>
|
||||
export declare function useStorageAsync(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<number>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<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>>
|
||||
export declare function useStorageAsync<T = unknown>(
|
||||
key: string,
|
||||
initialValue: MaybeRefOrGetter<null>,
|
||||
storage?: StorageLikeAsync,
|
||||
options?: UseStorageAsyncOptions<T>,
|
||||
): RemovableRef<T> & Promise<RemovableRef<T>>
|
||||
```
|
||||
Reference in New Issue
Block a user