关于这个插件,官方给出的解释是‘约定一个地方生产和消费初始化数据。有 src/app.ts 并且导出 getInitialState 方法时启用。’

这是官方文档

理解为在初始化进入页面,或者在每次刷新页面时,获取需要的基础数据展示

首先,使用getInitialState,该配置是一个 async 的 function。会在整个应用最开始执行,返回值会作为全局共享的数据。Layout 插件、Access 插件以及用户都可以通过 useModel('@@initialState') 直接获取到这份数据:

// 在app.jsx里面进行获取初始化数据

const initialState = {

};

export async function getInitialState() {
  Promise.all([
	    salesList(),   // 接口请求事件
	    goodsList(),
  ]).then(([salesGoods, allGoods]) => {
	    Object.assign(initialState, {
		      salesgoodsList: salesGoods?.data,
		      allgoodsList: allGoods?.data,
	    });
  });

  return initialState;
}

然后在需要的页面进行数据获取渲染:

import { useModel } from 'umi';   // 要配合useModel 去获取数据
const {
	    initialState: {   // 初始化数据
		      salesgoodsList= [],
		      allgoodsList= [],
	    },
	    loading,  // getInitialState 是否处于 loading 状态,在首次获取到初始状态前,页面其他部分的渲染都会被阻止。loading 可用于判断 refresh 是否在进行中。
	    error,  // 当运行时配置中,getInitialState throw Error 时,会将错误储存在 error 中。
	    refresh,  // 重新执行 getInitialState 方法,并获取新数据。相当于刷新了一遍初始化数据,但是页面无感知。// refresh()
	    setInitialState  // 手动设置 initialState 的值,手动设置完毕会将 loading 置为 false.  // setInitialState({ ...initialState, allgoodsList: data })
  } = useModel('@@initialState');

// 直接使用获取到的初始化数据
function handleData () {
	console.log(salesgoodsList)
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐