umiJs 4.x useModel使用报错问题解决

在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。