在umi 3.x框架中,我们使用useModel相对比较方便:
1、src文件夹下创建models文件夹,创建全局model ts文件:
数据流管理插件采用约定式目录结构,我们约定可以在 src/models
, src/pages/xxxx/models/
目录中,和 src/pages/xxxx/model.{js,jsx,ts,tsx}
文件引入 Model 文件。 Model 文件允许使用 .(tsx|ts|jsx|js)
四种后缀格式。
2、在需要使用的文件中 引入useModel即可使用。
import { useModel } from "umi";
export default ()=> {
const { XXX } = useModel('xxModel') ;
}
更新到umi 4.x后,useModel的使用方式有了些许变化,变化主要在于引入注册机制。
umi 4.x 强调运行时配置的概念,就是说需要什么插件,你就自己引入注册使用,在很大程度上避免了框架过于臃肿的麻烦,加快了打包运行速度
使用方式主要有2种:
1、在创建umijs项目时,选择自带数据流功能的 @umijs/max
项目
在使用 create-umi
选择 Ant Design Pro
模板,就能使用 @umijs/max
来创建项目了。
npx create-umi@latest
? Pick Umi App Template › - Use arrow-keys. Return to submit.
Simple App
❯ Ant Design Pro
Vue Simple App
新建的项目默认安装以下插件, 可以按需开启:
- 权限
- 站点统计
- Antd
- 图表
- dva
- initial-state
- 数据流
- 布局和菜单
- 国际化(多语言)
- model
- 乾坤微前端
- 请求库
- Tailwind CSS
- CSS-IN-JS
- 请求方案
- 全局数据存储方案
- Module Federation
同时需要在项目中注册使用model:
// .umirc.ts 或者 config.ts 中
export default {
model: {}
};
2、手动开启数据流功能的插件使用该功能
这种方法是建立在创建的umi项目中没有包含数据流功能插件的情况下
首先安装 数据流功能插件:
npm i -D @umijs/plugins
注册使用model:
// .umirc.ts
export default {
plugins: [
'@umijs/plugins/dist/initial-state',
'@umijs/plugins/dist/model',
],
initialState: {},
model: {},
};
通过以上两种方法 即可在umijs 4.x 中正常使用 useModel hook。