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

ゝ一纸荒年。 2022-09-14 11:29 3阅读 0赞

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

[这是官方文档][Link 1]

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

首先，使用`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)
    }

[Link 1]: https://umijs.org/zh-CN/plugins/plugin-initial-state