React中提到数据流就不得不提Redux，Redux提出的单向数据流的理念是正确的，可惜实现的太糟糕了，随着ReactHook的流行，Redux由于写法过于复杂也彻底被抛弃了，现在轻量级的数据管理方案更加流行。UmiJS提供的useModel()函数就是一个很轻量的数据流方案。
使用内置插件时，我们需要先安装@umijs/plugins。
npm install --save-dev @umijs/plugins
然后在config/config.ts中配置plugins字段和对应的插件配置字段即可。
export default defineConfig({
plugins: ['@umijs/plugins/dist/model'],
model: {},
});
UmiJS对于数据模型采用了约定目录结构的方式，我们可以将数据模型文件放在src/models目录、src/pages/xxx/models/目录或是src/pages/xxx/model.ts下，约定的目录会有一个对应的命名空间，对应关系如下表格。
| 路径 | 命名空间 | 说明 |
|---|---|---|
src/models/count.ts |
count |
src/models 目录下不支持目录嵌套定义 model |
src/pages/pageA/model.ts |
pageA.model |
|
src/pages/pageB/models/product.ts |
pageB.product |
|
src/pages/pageB/models/fruit/apple.ts |
pageB.fruit.apple |
pages/xxx/models 下 model 定义支持嵌套定义 |
下面例子代码中，我们创建了一个简单的数据模型。
src/models/user.ts
import {useRequest} from "umi";
import {getUser} from "@/service/service";
export default function Model() {
const {data: user, loading} = useRequest(() => {
return getUser();
});
return {user, loading};
}
根据之前表格中的规则，这个模型的命名空间是user，后面我们可以在任何React组件中使用这个命令空间调用到数据模型。数据模型中也是可以使用useState()、useEffect()等Hook的，这里我们使用UmiJS提供的useRequest()请求了一个接口，然后将返回的数据和加载中状态返回。
调用数据模型非常简单，使用useModel()函数并传入数据模型的命名空间字符串即可。
import {useModel} from "umi";
export default function HomePage() {
const {user, loading} = useModel('user');
return (
<div>
{loading ? '加载中' : JSON.stringify(user)}
</div>
);
}
代码中，我们使用解构赋值的方式获取了数据模型的返回值和加载中状态。