ant design Pro中 initialState的使用方法

前言：

initialState可以实现全局数据共享

基本使用：

在 umi 的运行时配置 src/app.tsx 中添加运行时配置 getInitialState ，该配置是一个 async 的 function，示例如下：

export async function getInitialState() {
  return {
    userName: 'xxx',
  };
}

eg：

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  loading?: boolean;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      return await queryCurrentUser();
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };
  // 如果是无需登录的页面，不执行
  if (NO_NEED_LOGIN_WHITE_LIST.includes(history.location.pathname)) {
    return {
      // @ts-ignore
      fetchUserInfo,
      settings: defaultSettings,
    };
  }
  const currentUser = await fetchUserInfo();
  return {
    // @ts-ignore
    fetchUserInfo,
    currentUser,
    settings: defaultSettings,
  };
 
}

如果你想在其他组件使用里面的信息：

第一步：导入

import { useModel } from 'umi'; // 要配合useModel 去获取数据

umi 提供了useModel('@@initialState')去获取这个数据 

相当于我在initialState里存了currentUser信息，我给他取了个别名loginUser

补充说明：

 

最后还不懂附上官网链接：全局初始数据 - Ant Design Pro