跳转到主文档

使用 Model

本文基于 Model 介绍 一节创建的 countModel 为例,介绍 Model 的使用。

使用全局状态

import { useModel } from "@modern-js/runtime/model";
import countModel from "./models/count";

function Counter() {
const [state, actions] = useModel(countModel);

return (
<div>
<div>counter: {state.value}</div>
<button onClick={() => actions.add()}>add</button>
</div>
);
}

export default function App() {
return <Counter />;
}
  • Counter 组件中,通过 useModel API 使用 countModeluseModel 返回 Model 对象中保存的全局状态: state 和 变更状态的操作:actions
  • 当点击 add 按钮时,计数器自增一,并重新渲染 Counter 组件,更新视图。

最终效果如下:

countModel

本节完整的示例代码可以在这里查看。

补充信息

相关 API 的更多介绍,请参考这里)。