快速开始
3 分钟快速上手 ZenBox
安装
npm install zenbox基本用法
创建 Store
使用 createStore 创建带有初始状态的 store：
import { createStore } from "zenbox";
// 自动类型推导，无需手写 interface
const counterStore = createStore({ count: 0 });在组件中使用
使用 useStoreValue 订阅状态变化：
import { useStoreValue } from "zenbox";
function Counter() {
const { count } = useStoreValue(counterStore);
function increment() {
counterStore.setState((state) => {
state.count++;
});
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>增加</button>
</div>
);
}像 Vue 一样的写法
使用 Vue 风格的 hooks 进行响应式编程：
function DoubleCount() {
const doubleCount = useComputed(() => counterStore.value.count * 2);
return <p>doubleCount: {doubleCount}</p>;
}
function CountWatcher() {
useWatch(
() => counterStore.value.count,
(current, prev) => {
console.log("从", prev, "变为", current);
}
);
useWatchEffect(() => {
if (counterStore.value.count > 10) {
console.log("count 超过 10");
}
});
return <p>监听计数变化...</p>;
}下一步： 查看使用指南了解更多用法和最佳实践。