Umi 常用插件干货（二）

如果不明白为什么代码里会有别的代码，请看下上篇文章

@umijs/plugin-initial-state

• 启用方式：src/app.tsx文件中暴露出getInitialState()方法

• 作用：约定一个地方生产和消费初始化数据

• 介绍：本插件不可直接使用，必须搭配 @umijs/plugin-model 一起使用

src/app.tsx文件, 启用插件，这里应该是一个请求，return出用户的数据，暂时没有调用接口，咱们直接返回常量

在src/pages/Login/index.tsx中使用

效果图

Api等下使用@umijs/plugin-model会说明下

@umijs/plugin-access 权限插件

• 启用方式：src文件下有access.tsx文件

• 作用：判断用户权限，显示不同的内容

src/access.tsx文件，需要有返回值，返回值一般是判断后的用户身份

Umi官方文档是返回了三个自定义的值，我觉得可以返回自己用的，每个权限进行一个判断，例如：通过一个方法去返回是否具有这个权限，这里我们暂时声明一个字段SuperTube超管，用于后续Demo的展示。

src/pages/Login/index.tsx中使用

• 从umi中引入useAccess方法
• 获取useAccess方法的返回值

打印返回值

可以看到，我们判断用户是否是超管的字段，已经返回给我们了

从Umi中引入Access组件，我们先看一下Access的返回值

• accessible 是否有权限查看，有权限查看展示子组件
• fallback 没有权限查看时，展示的组件

有权限效果图

无权限效果图 我们先去src/app.tsx文件下，将返回的role改为普通用户

@umijs/plugin-dva 整合dva数据流

特性：

• 内置dva 版本为^2.6.0-beta.20 项目中有依赖，优先使用依赖
• 约定式的 model 组织方式，不用手动注册 model
• 内置 dva-loading，直接 connect loading 字段使用即可
• 支持 immer，通过配置 immer 开启

src/config/config.tsx文件中启用@umijs/plugin-dva 插件

暂不选择开启immer模式，后续再开启，进行对比

src目录下创建models文件夹，根据官方的规范使用，不然umi中无法暴露出connect.创建dvaInfo.tsx文件

注： 未按照官方示例，完全是个人理解

代码也贴出来了，需要尝试的jym 可以复制一下

import { Reducer } from 'umi';
export interface dvaInfoModelState {
  name: string;
}
export interface dvaInfoModelType {
  namespace: 'dvaInfo';
  state: dvaInfoModelState;
  reducers: {
    save: Reducer<dvaInfoModelState>;
    // 启用 immer 之后
    // save: ImmerReducer<dvaInfoModelState>;
  };
}
const DvaInfoModel: dvaInfoModelType = {
  // 暴露出dva容器的名称 
  namespace: 'dvaInfo',
  // 容器的初始值   
  state: {
    name: 'Fiber',
  },
  // 暴露出的方法   
  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
    // 启用 immer 之后
    // save(state, action) {
    //   state.name = action.payload;
    // },
  },
};
export default DvaInfoModel;

使用@umijs/plugin-dva

在pages目录下，新建文件夹DvaDemo并创建文件index.tsx，配置路由的过程，就不重复了。

先将我们刚才声明的dvaInfomodel文件，拼接到组件上。

我们打印props，验证是否挂载成功

可以看到我们不仅挂载成功了，props上还有一个dispatch的方法，下来我们修改dvaInfo中的值。

效果图

通过dispatch更改后的值，是同步的还是异步的？

我们可以看到是异步，那如何变成同步的形式呢？后续，我会在更新一遍dva的文章，留个悬念吧。。。。。。

pages/DevDemo/index.tsx代码

import React, { FC } from 'react';
import { Loading, connect, dvaInfoModelState } from 'umi';
interface PageProps {
  dvaInfo: dvaInfoModelState;
  loading: boolean;
  dispatch: any
}

const DvaDemo: FC<PageProps> = (props) => {
  const { dispatch } = props
    
  const changeValue = () => {
      dispatch({
          type:'dvaInfo/save',
          payload:{
              name:'学会了'
          }
      })
      console.log(props.dvaInfo,'');
  }

  return (
    <div>
      <p>{props.dvaInfo.name}</p>
      <p onClick={changeValue}>更改dvaInfo内部的值</p>
    </div>
  )
};
// 先将暴露的model的数据拼接到组件上
export default connect(
    ({ dvaInfo, loading }: { dvaInfo: dvaInfoModelState; loading: Loading }) => 
    ({
        dvaInfo,
        loading: loading.models.index,
    })
)(DvaDemo);

@umijs/plugin-layout ProLayout布局插件

介绍：

• 默认为 Ant Design 的 Layout @ant-design/pro-layout，支持它全部配置项。
• 侧边栏菜单数据根据路由中的配置自动生成。
• 搭配 @umijs/plugin-initial-state 插件和 @umijs/plugin-model 插件一起使用，可以拥有默认用户登陆信息的展示。
• 搭配 @umijs/plugin-access 插件一起使用，可以完成对路由权限的控制。

开启@umijs/plugin-layout插件 config/config.tsx文件

配置layout规则

我习惯于通过一个文件控制layout的Api，所以我们在config文件夹中创建defaultSettings.tsx文件

src/app.tsx文件下，暴露出去layout属性，在构建时是无法使用 dom 的，所以有些配置可能需要运行时来配置

效果图

丑了点。。。。具体的个性化配置，各位jym可以自行配置，回归整体，我们发现左侧的路由没了。官方不是说会自动生成路由菜单吗？其实生成是需要额外配置一个属性的

config/routes.tsx文件

效果图:

上述只是个人使用过程中的一些知识积累，目前还没有公司项目使用到Umi。若以后使用到，会再来完善这里的内容，或者新开文章记录。改BUG了。。。