umi中使用plugin-initial-state插件(initialState)

关于这个插件，官方给出的解释是‘约定一个地方生产和消费初始化数据。有 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)
}