快速开始
2 分钟从零到上手
安装
npm install zenbox你的第一个 Store
先从一个简单的计数器开始：
import { createStore, useStore } from "zenbox";
// 创建 store - 类型自动推导
const counter = createStore({
count: 0,
increment: () =>
counter.setState((s) => {
s.count++;
}),
decrement: () =>
counter.setState((s) => {
s.count--;
}),
reset: () => counter.setState({ count: 0 }),
});
// 在组件中使用
function Counter() {
const { count, increment, decrement, reset } = useStore(counter);
return (
<div>
<h2>计数: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>重置</button>
</div>
);
}是不是很简单？不用手写 Store 类型，不用 provider，不用配置。直接能用。
加上点 Vue 般的魔法
再加上计算属性和监听器试试看：
import { useComputed, useWatch } from "zenbox";
function EnhancedCounter() {
// 计算属性 - 依赖变化时自动更新
const doubled = useComputed(() => counter.value.count * 2);
const isEven = useComputed(() => counter.value.count % 2 === 0);
// 监听变化
useWatch(
() => counter.value.count,
(newCount, oldCount) => {
if (newCount > 10) {
console.log("数字变大了！");
}
}
);
return (
<div>
<p>双倍: {doubled}</p>
<p>是偶数: {isEven ? "是" : "否"}</p>
<button onClick={counter.value.increment}>增加</button>
</div>
);
}多个 Store 也不在话下
const user = createStore({
name: "小明",
email: "xiaoming@example.com",
});
const posts = createStore({
items: [],
addPost: (title) =>
posts.setState((s) => {
s.items.push({ id: Date.now(), title, author: user.value.name });
}),
});
function Summary() {
// 跨 store 计算 - ZenBox 会自动追踪依赖的变化
const userSummary = useComputed(
() => `${user.value.name} 写了 ${posts.value.items.length} 篇文章`
);
return <p>Summary: {userSummary}</p>;
}使用选择器优化重渲染
当组件只依赖 Store 中的某些字段时，使用选择器可以避免不必要的重新渲染。
// ❌ 在 store 任何变化时都重新渲染，即使只是 age 变了
const { name, email, age } = useStore(userStore);
// ✅ 只在 name 或 email 变化时重新渲染
const { name, email } = useStore(userStore, { pick: ["name", "email"] });为了方便，也可以使用 usePick 来选择指定字段：
// 和上面一样，但更简洁
const { name, email } = usePick(userStore, "name", "email");就这么简单
现在你已经掌握了用 ZenBox 开发所需的一切，剩下的就是开始构建你的应用了。
createStore()创建状态useStore()订阅状态变化usePick()选择指定字段useComputed()计算属性useWatch()监听变化
使用指南里还有一些其他高级用法，感兴趣的话不妨去看看。