ant design Pro中 initialState的使用方法

news2024/10/4 20:19:50

前言:

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1033152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Crazy Excel:Excel中的泥石流

Crazy Excel又名&#xff1a;疯狂Excel。是一款PC端的Excel软件工具&#xff0c;该软件支持windows, mac os等主流操作系统。 正如其名&#xff0c;作者在设计之初就加入了一些疯狂的设计&#xff0c;目的是创作出更加好用有效的excel工具。 不管是专业还是小白&#xff0c;…

【校招VIP】产品逻辑考察之优先级

考点介绍&#xff1a; 如何定义需求的优先级是考察产品经理能力的方法之一。 定义产品需求的优先级是非常关键的&#xff0c;不然团队会不知道各项事务的轻重缓急&#xff0c;资源和精力都无法集中在最重要的目标上。 产品逻辑考察之优先级-相关题目及解析内容可点击文章末尾链…

TSINGSEE视频AI智能分析技术:水泥厂安全生产智能监管解决方案

一、方案背景 随着人工智能技术的快速发展以及视频监控系统在全国范围内的迅速推进&#xff0c;基于AI视频智能分析技术的智能视频监控与智慧监管系统&#xff0c;也已经成为当前行业的发展趋势。在工业制造与工业生产领域&#xff0c;工厂对设备的巡检管理、维护维修、资产管…

Spring Cloud Gateway快速入门(四)——gateway最最重要的功能!Gateway如何实现的服务匹配

文章目录 前言为什么要使用gateway进行服务的分配集中化的路由管理&#xff1a;动态路由的支持&#xff1a;请求过滤和处理&#xff1a;高性能和高可靠性&#xff1a; 1. 介绍2. 服务匹配的概念2.1 路由规则2.1.1 Predicate&#xff08;断言&#xff09;2.1.2 Filter&#xff0…

GC8837国产驱动芯片,可以替代TI的DRV8837C,具有 PWM(IN/IN)输入接口, 与行业标准器件兼容,并具有过温保护功能。

GC8837 是一款 12V 直流电机驱动芯片&#xff0c; 为摄像机、消费类产品、玩具和其他低压或 者电池供电的运动控制类应用提供了集成的 电机驱动解决方案。芯片一般用了驱动一个 直流电机或者使用两颗来驱动步进电机。可以工作在 0~12V 的电源电压 上&#xff0c;能提供高达 1.5…

OpenCV之油画特效

源码&#xff1a; # 读取图片 img cv2.imread("d:/img.jpg", 1) height, width, channels img.shape# 灰度图 gray_img cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)# 将图像分为8x8的多个小块&#xff0c;并统计小块每个像素的灰度值 # 划分灰度等级&#xff0c;例如…

手写实现简易Spring框架

该文章记录的是自己实现简易Spring框架的记录&#xff0c;简化了源码中的大量操作&#xff0c;没有实现三级缓存的机制。 其中将会对Component&#xff0c;ComponentScan&#xff0c;Scope&#xff0c;Autowired注解。BeanDefinition类以及ApplicationContext、BeanPostProcess…

C++中的 throw详解

在《C++异常处理》一节中,我们讲到了 C++ 异常处理的流程,具体为: 抛出(Throw)--> 检测(Try) --> 捕获(Catch) 异常必须显式地抛出,才能被检测和捕获到;如果没有显式的抛出,即使有异常也检测不到。在 C++ 中,我们使用 throw 关键字来显式地抛出异常,它的用…

【GAMES103】基于物理的计算机动画入门(1)前置的基础数学知识

GAMES103: 基于物理的计算机动画入门 链接&#xff1a;GAMES103 1. 坐标系的划分 在游戏引擎中分为右手和左手坐标系&#xff0c;区分的依据是什么&#xff1f; 上图可以看到如果是左手坐标系&#xff0c;那么所有的物体都在屏幕后面&#xff0c;意味着x&#xff0c;y&#x…

【Linux 之二】Ubuntu下开发环境的搭建(NFS \ SSH \ FTP \ Smba \ ...)

目前正在进行Linux相关项目的开发&#xff0c;而我的Linux开发是在Ubuntu&#xff08;版本20.04&#xff09;下进行的&#xff0c;为此需要搭建很多Linux相关的开发环境&#xff0c;方便工作的进行。这里主要是对各种开发环境的搭建做一个总结记录&#xff0c;方便后面查阅&…

彻底解决win11系统0x80070032

经过各种尝试&#xff0c;终于找到原因。第一个是电脑加密软件&#xff0c;第二个是需要的部分功能没有开启&#xff0c;第三个BIOS设置。个人觉得第三个不重要。 解决方法 笔记本型号 笔记本型号是Thinkpad T14 gen2。进入BIOS的按键是按住Enter键。 1、关闭山丽防水墙服务…

AI AIgents时代 - (四.) HuggingGPT MetaGPT

&#x1f7e2; HuggingGPT HuggingGPT是一个多模型调用的 Agent 框架&#xff0c;利用 ChatGPT 作为任务规划器&#xff0c;根据每个模型的描述来选择 HuggingFace 平台上可用的模型&#xff0c;最后根据模型的执行结果生成总结性的响应。 这个项目目前已在 Github 上开源&am…

【暴力DP】CF1409 F

Problem - F - Codeforces 题意&#xff1a; 思路&#xff1a; 首先有个很明显的结论是&#xff1a;替换的字符一定是那两个字符之一 那么替换成哪个字符贡献更大不确定&#xff0c;因此考虑DP 因为有操作次数限制&#xff0c;直接把操作放进状态里 为了计算贡献&#xff…

Go语言高级特性解析与实践

1. 并发模型与goroutine Go语言以其强大的并发模型而闻名&#xff0c;它的核心机制是goroutine。goroutine是一种轻量级线程&#xff0c;由Go运行时负责调度。我们可以通过go关键字创建goroutine&#xff0c;而不需要像传统的线程编程那样关注底层的线程管理。 示例代码&…

Spring boot:解决@RequestBody失效问题:传入的实体类为NULL

1.问题描述 使用springboot写了一个controller类&#xff0c; 在使用postman测试用户注册功能的时候&#xff0c; 出现了传入实体类user&#xff0c;没有被读取的问题&#xff08;即requestbody注解失效&#xff09;。 2.解决方法 1.用户请求方式问题 在请求时&#xff0c…

ruoyi框架修改左侧菜单样式

菜单效果 ruoyi前端框架左侧的菜单很丑&#xff0c;我们需要修改一下样式&#xff0c;下面直接看效果。 修改代码 1、sidebar.scss .el-menu-item, .el-submenu__title {overflow: hidden !important;text-overflow: ellipsis !important;white-space: nowrap !important;//…

java框架-Springboot3-数据访问

整合SSM SpringSpringMVCMybatis 整合步骤 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"…

k8s master 是如何进行pod的调度的

Master 节点将 Pod 调度到指定的 Node 节点的原理 该工作由 kube-scheduler 来完成&#xff0c;整个调度过程通过执行一些列复杂的算法最终为每个 Pod 计算出一个最佳的目标 Node&#xff0c;该过程由 kube-scheduler 进程自动完成。常见的有轮询调度&#xff08;RR&#xff09…

用HTML、CSS和JavaScript制作的通用进制转换器

随着编程和计算机科学越来越受欢迎&#xff0c;我们经常需要进行进制转换。本文将介绍一个简洁、美观、适用于移动设备的进制转换工具&#xff0c;并详细讨论其实现。 目录 &#x1f30d; 用HTML、CSS和JavaScript制作的通用进制转换器 1.项目图片展示 2. 技术栈 3. 主要功…

Unity Bolt模块间通信

使用Bolt无代码设计开发的时候&#xff0c;我们不能简单的认为只需要一个FlowMachine就可以完成所有流程的开发。我们需要不同的模块进行拆分&#xff0c;以便更好的管理和协作。这就需要不同模块之间的通信处理。经过研究与使用&#xff0c;将常用的通信方式总结如下&#xff…