Vue 集成

在 Vue 里，建议把 wasm runtime 放进单例 composable，或者封装在 provide/inject 背后。应用启动附近加载一次，后续在页面、列表和播放器组件之间复用同一份 runtime。

Composable 草图

const runtime = createVgmstreamRuntimeManager({
  loadModule: createBrowserModuleLoader({
    scriptUrl: '/assets/vgmstream_wasm_min.js',
    wasmUrl: '/assets/vgmstream_wasm_min.wasm',
  }),
});

export function useVgmstreamRuntime() {
  return runtime;
}

为什么单例更重要

单例 runtime 可以避免重复下载、重复初始化以及被误解的性能数据。它还能让你更清楚地区分冷路径和热路径的播放表现，并把资源管理集中到一处。

常见反模式

不要在每个组件实例里都创建一份 runtime。
不要在每次点击播放时重新下载 wasm。
不要把 runtime 藏在寿命很短的行组件或弹窗组件里。
切换当前文件时，不要忘记回收旧 blob URL。

Vue Integration

In Vue, keep the wasm runtime in a singleton composable or behind provide/inject. Load once near app startup and reuse that same runtime across pages, lists, and player widgets.

Recommended structure

Create one app-level runtime module.
Expose it through provide/inject or a single composable.
Let view components call decode helpers without owning runtime creation.

Composable sketch

const runtime = createVgmstreamRuntimeManager({
  loadModule: createBrowserModuleLoader({
    scriptUrl: '/assets/vgmstream_wasm_min.js',
    wasmUrl: '/assets/vgmstream_wasm_min.wasm',
  }),
});

export function useVgmstreamRuntime() {
  return runtime;
}

Why singleton matters

A singleton runtime avoids duplicate fetches, duplicate initialization work, and misleading performance data. It also makes it easier to reason about cold-path versus warm-path playback behavior.

Avoid these anti-patterns

Do not create a new runtime inside every component instance.
Do not fetch the wasm script every time the user clicks play.
Do not hide the runtime in short-lived row components or modal dialogs.
Do not forget to revoke old blob URLs when the current decoded file changes.