创建Model

在src/models下面创建model文件，按照官方的说法，只要创建的model符合hooks model的规范，就可以自动检测到，文件名则对应最终 model 的 name。
这里我们新建一个叫做IdentityModelTest.js的文件。

import { useState, useCallback } from 'react'
//这是我自己写的一个request请求函数，具体可见另一篇关于useRequest的介绍。
import { GetPersonIdentityBySearch } from '@/services/ant-design-pro/api';
import { useRequest } from '@umijs/hooks';

export default function IdentityModelTest() {
  //创建一个名为Identity的State，并配套一个setIdentity的方法用于更新State。
  const [Identity,setIdentity] = useState(null);
  //这是一个发起请求的手动触发函数，并在成功后通过setIdentity更新了State。
  const { loading, run } = useRequest(GetPersonIdentityBySearch,{
    manual: true,
    onSuccess: (result, params) => {
      setIdentity(result);
    }
  });
  //定义一个方法searchIdentity，并传入参数conditions。
  const searchIdentity = useCallback((conditions) => {
    run(conditions);
  }, [])
  //决定了向外暴露的值和方法。
  return {
    Identity,
    searchIdentity,
  }
}

其实这个model和Dva时期的model功能上来讲都差不多，定义state，通过操作更改state，只不过把fetch和reducer改成了useRequest和setState。

使用Model

有了Model之后，就可以在具体的业务场景中进行消费使用，并且在model的state更新之后，也会同步触发页面的更新。

//引入useModel才能使用model
import { useModel } from 'umi';
export default () => {
    //通过useModel('Model名')来使用Model，并解构其暴露出来的值或方法。
    const { Identity,searchIdentity} = useModel('IdentityModelTest');  
    //此时就可以通过暴露出来的接口传参并执行相关的业务逻辑。
    searchIdentity(value);
    //Identity也可以直接使用。