跳转到内容

Vue

@iostore/vue 提供只读订阅与双向绑定两种常见接入方式，适配 Vue ref 语义。

适用场景

Vue 组件中读取 IO 状态。
表单输入与 IO 双向同步。
需要按路径粒度控制更新。

安装

安装相关依赖（任选一种包管理工具）：

npm i @iostore/store @iostore/vue

pnpm add @iostore/store @iostore/vue

yarn add @iostore/store @iostore/vue

bun add @iostore/store @iostore/vue

最小接入

useIO（只读订阅）

import { io } from '@iostore/store';
import { useIO } from '@iostore/vue';

const store = io({ count: 0 });
const state = useIO(store.count);

useIO 返回 ShallowRef，适合直接在模板中读取。

ioRef（双向绑定）

import { ioRef } from '@iostore/vue';

const countRef = ioRef(store.count);

适合 v-model、输入组件等读写一体场景。

调度策略

const state = useIO(store.count, { schedule: 'microtask' });

可选值：sync | microtask | animationFrame。

API 速查

场景	API	说明
只读订阅	`useIO(unitOrDerived, options?)`	返回 `ShallowRef`，适合展示读取。
双向绑定	`ioRef(unit, options?)`	返回可写 Ref，适合 `v-model`。
通知调度	`options.schedule`	`sync` / `microtask` / `animationFrame`。
路径写入	`unit.set(next	updater)`
批量写入	`batch(fn)`	减少连续写入引发的通知抖动。

错误示例与推荐写法

// 错误：把 useIO 返回值当可写 ref
const count = useIO(store.count);
// count.value++

// 推荐：写入用 ioRef 或 set
const countRef = ioRef(store.count);
countRef.value += 1;

// 错误：订阅根节点
const state = useIO(store);

// 推荐：路径订阅
const count = useIO(store.count);

常见问题

在模板中直接操作根状态，导致更新范围过大。
误把 useIO 当可写 ref：写入请用 ioRef 或 set()。
高频输入未做节流/防抖，副作用触发过密。

实践建议

展示用 useIO，交互输入用 ioRef。
路径订阅优先于根订阅，减少组件重渲染。
结合 Schedule 控制通知时机。

下一步

查看派生值的组合方式。
需要 SSR 时，查看 Nuxt 实战章节。

文档导航