vueuse-shared-skilld

@vueuse/shared 15.0.0

Vue 用のフレームワークに依存しないリアクティブユーティリティです。ピア依存関係は vue ^3.5.0 （package.json:40）です。ESM のみで、「type」は「module」に設定されており、dist に CJS ビルドはありません（package.json:2）。Node.js >= 22 が必要です（package.json:37）。

dist/index.js:904 のようなソースの参照先は、準備済みのパッケージソースを示します。 関数のドキュメント：https://vueuse.org/。

v15 の重要なルール

• v15.0.0 で useThrottleFn のデフォルトの trailing が false から true に変更されました。 現在のデフォルトは ms = 200, trailing = true, leading = true, rejectOnCancel = false です （dist/index.js:904）。リリース：https://github.com/vueuse/vueuse/releases/tag/v15.0.0 v14 の先行エッジのみの動作にするには、trailing = false を明示的に渡してください。
• computedEager / eagerComputed は非推奨となり、削除が予定されています。 代わりに Vue 3.4+ の computed を使用してください（dist/index.d.ts:5-18）。
• watchPausable / pausableWatch は、すべてのオーバーロードで非推奨です。 Vue 組み込みの watch を使用してください。ハンドルにはすでに pause() と resume() があります （dist/index.js:1021, dist/index.d.ts:1459-1466）。
• 非推奨のエイリアスよりも優先名を使用してください。migration-v15 の表を参照してください。
• タイマーコンポーザブルはサーバー上では何もしません。useIntervalFn と useTimeoutFn は isClient の場合にのみタイマーを開始します（dist/index.js:1654, dist/index.js:1726-1729）。

よくあるタスク

import { useDebounceFn, useThrottleFn } from '@vueuse/shared'

// Debounced fn: returns a promise; cancel/flush/isPending attached
const search = useDebounceFn(query => fetchApi(query), 300, { maxWait: 1000 })

// Rate-limit scroll/resize; v15 fires on BOTH edges by default
const onScroll = useThrottleFn(handler, 200)          // leading + trailing
const onScrollV14 = useThrottleFn(handler, 200, false) // trailing=false, v14 style

import { until, whenever } from '@vueuse/shared'

// One-shot async flow control instead of manual watchers
await until(isReady).toBe(true, { timeout: 5000, throwOnTimeout: true })

// Runs only while truthy; { once: true } auto-stops after the first run
whenever(isReady, data => render(data), { once: true })

import { createInjectionState } from '@vueuse/shared'

// Typed provide/inject pair without manual InjectionKey
const [useProvideStore, useStore] = createInjectionState(() => {
  const count = ref(0)
  return { count, inc: () => count.value++ }
}, { defaultValue: { count: ref(0), inc: () => {} } })

import { refManualReset, syncRef } from '@vueuse/shared'

const message = refManualReset('idle')   // message.reset() restores 'idle'
const num = ref(10), str = ref('10')
syncRef(num, str, {                       // transform is required when
  transform: {                            // types differ (type-level check)
    ltr: v => String(v),
    rtl: v => Number(v),
  },
})

その他の実用例：reactivity-utilities、 watch-utilities。

状態共有ツールの選択

ツール	寿命	使用する場面
createGlobalState	アプリの存続期間中。破棄されません（dist/index.js:169-180）	アプリ全体で共有するシングルトン状態
createSharedComposable	最後の購読者が離れると破棄されます（dist/index.js:583-605）	コンポーザブルのインスタンスを1つ共有する場合。例：useMouse を1つ共有
createInjectionState	コンポーネントツリーに紐づきます	型付きのプロバイダー／コンシューマーストア
provideLocal / injectLocal	同じコンポーネントまたはスコープ内	1つのコンポーネント内で提供および注入する場合

SSR：createSharedComposable はサーバー上では通常のコンポーザブルにフォールバックするため、 リクエストごとに新しい状態が作成されます（dist/index.js:584）。詳細： state-sharing。

参考資料

• api-surface：シグネチャとデフォルト値を含む、エクスポートの完全な一覧
• migration-v15：v14 から v15 への変更点と、非推奨エイリアスの対応表
• debounce-throttle：フィルター、useDebounceFn、useThrottleFn の動作
• watch-utilities：watch の各種関数、until、whenever
• reactivity-utilities：ref／computed／同期ヘルパー
• state-sharing：グローバル、共有、注入された状態
• timers-and-utils：タイマー、カウンター、書式設定、プレーンなユーティリティ