umi插件-plugin-initial-state和plugin-model

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

基于plugin-initial-state， plugin-model插件，在项目中存入和使用全局数据。

使用的两个插件的作用

• plugin-initial-state: 初始化数据管理插件。约定一个地方导出需要共享的数据。
• plugin-model：一种基于 hooks 范式的简易数据管理方案，用于全局共享数据。

使用plugin-initial-state导出共享数据

常在入口文件(/app.js)，使用getInitialState作为一个钩子函数获取一些初始状态，以返回值作为全局状态以便消费。每次刷新都会重新去获取状态。

javascript export async function getInitialState(){ const user = await getUserInfo(); const token = await getToken(); return { user, token, }; }

配合使用plugin-model获取或者重新设置数据

```javascript import { useModal } from 'umi';

const { initialState, loading, error, refresh, setInitialState } = useModel("@@initialState"); const { user,token } = initialState || {}; ```

调用useModel('@@initialState')，我们能拿到一些值initialState, loading, error, refresh, setInitialState。

getInitialState返回的数据都是存入到了initialState中。

initialState：getInitialState()的返回值，也就是之前设置的初始化数据。

loading：getInitialState时的loading状态。

error：当getInitialState出错时，抛出的错误将存在error中。

refresh：如果需要重新调用getInitialState()获取数据，可以使用refresh()。

setInitialState：手动更新初始化数据，会覆盖以前设置的数据，如果需要以前的数据，需要手动加上以前的数据。这个使用场景还是比较多的，比如登陆后，可能有一些数据可以存在这里，或者一些布局上的全局数据，主题色，用户信息，都可以存在这里

```javascript import { useModal } from 'umi';

const { initialState, loading, error, refresh, setInitialState } = useModel("@@initialState"); setInitialState({ ...initialState, shouMenu: true, }) ```

为什么这里可以使用 useModel("@@initialState");

看过plugin-model用法的应该知道，这个插件其本质上就是自定义一个hooks去使用，我们一般在src/models文件夹下输出一些文件去定义不同的hooks，可以在其他组件通过useModel去使用该hooks中返回的数据和方法。

但是在这里我们只看到了useModel使用命名为"@@initialState"的hooks,并没有看到该hooks的定义？ 其实这就是plugin-initial-state的原理所在，其实这个插件内部就是，自定义了一个"@@initialState"命名的hooks，相当于通过一个内置的自定义hooks去管理全局共享的数据。

```js // src/models/@@initialState.js

import { useState, useCallback } from 'react'

export default function @@initialState() { // ... // ... return { initialState, loading, error, refresh, setInitialState } }

```