umi插件

plugin-access

启用方式： 有src/access.ts时启用
des:约定了 src/access.ts 为我们的权限定义文件，该文件需要默认导出一个方法，导出的方法会在项目初始化时被执行。该方法需要返回一个对象，对象的每一个值就对应定义了一条权限。

// src/access.ts
export default function(initialState){// initialState是通过初始化状态插件@umijs/plugin-initial-state 提供的数据，你可以使用该数据来初始化你的用户权限const { userId, role } = initialState// 每个key对应一个布尔值，表示权限return {canReadFoo: true,canUpdateFoo: role === 'admin',canDeleteFoo: foo => {return foo.ownerId === userId;},}
}

• 路由权限配置
  配合 Layout 插件可以很简单的实现针对某些页面的权限控制。如下所示，只有拥有了 canReadPageA （在 src/access.ts 中定义）权限，用户才可以访问该页面。否则会默认渲染 Layout 插件内置的权限错误页面。

  // config/route.ts
  export const routes =  [{path: '/pageA',component: 'PageA',access: 'canReadPageA', // 权限定义返回值的某个 key}
  ]
  

• Hooks --> useAccess

import React from 'react';
import { useAccess } from 'umi';
const PageA = props => {const { foo } = props;const access = useAccess();if (access.canReadFoo) {// 如果可以读取 Foo，则...}return <>TODO</>;
};
export default PageA;

• 组件 -->
  des: 组件拥有 accessible 和 fallback 两个属性，当 accessible 为 true 时会渲染子组件，当 accessible 为 false 会渲染 fallback 属性对应的 ReactNode。

import React from 'react';
import { useAccess, Access } from 'umi';
const PageA = props => {const { foo } = props;const access = useAccess(); return (<div><Accessaccessible={access.canReadFoo}fallback={<div>Can not read foo content.</div>}>Foo content.</Access><Accessaccessible={access.canUpdateFoo}fallback={<div>Can not update foo.</div>}>Update foo.</Access><Accessaccessible={access.canDeleteFoo(foo)}fallback={<div>Can not delete foo.</div>}>Delete foo.</Access></div>);
};

plugin-dva

• 约定式的model组织方式
  规则:
  src/models 下的文件
  src/pages 下，子目录中 models 目录下的文件
  src/pages 下，所有 model.ts 文件

  + src+ models/a.ts+ pages+ foo/models/b.ts+ bar/model.ts
  

• dva model校验
  默认，匹配找到的文件，会做一次校验，校验通过后，才会被添加到最终到 dva model 列表。(model 内如果没有声明 namespace，会以文件名作为 namespace)

• 配置plugin-dva

export default {// 下值均为默认值dva:{immer:false, // (方便修改 reducer)。hmr: false, // (热模块更新)skipModelValidate:false, // (是否跳过 model 验证。)extraModels: [] // (配置额外到dva model)}
}

• dva运行时配置(通过src/app.tsx文件配置dva创建时的参数)

import { createLogger } from 'redux-logger';
import { message } from 'antd';
export const dva = {config: {onAction: createLogger(),onError(e: Error) {message.error(e.message, 3);},},
};

• umi接口
  des:常用方法可从 umi 直接 import。

import { connect } from 'umi';

• connect – 绑定数据到组件。
• getDvaApp – 获取 dva 实例
• useDispatch – hooks 的方式获取 dispatch
• useSelector – hooks 的方式获取部分数据
• useStore – hooks 的方式获取 store

• 查看项目中包含了哪些 model
  $ umi dva list model (没有安装umi的使用 npx umi dva list model)

• 类型
  通过 umi 导出类型：ConnectRC，ConnectProps，Dispatch，Action，Reducer，ImmerReducer，Effect，Subscription，和所有 model 文件中导出的类型。

plugin-initial-state

des: 约定一个地方生产和消费初始化数据。
启用：有 src/app.ts 并且导出 getInitialState 方法时启用(该插件不可直接使用，必须搭配 @umijs/plugin-model 一起使用)
配置：

// src/app.ts
export async function getInitialState() {const data = await fetchXXX();return data;
}//该配置是一个 async 的 function。会在整个应用最开始执行，返回值会作为全局共享的数据。Layout 插件、Access 插件以及用户都可以通过 useModel('@@initialState') 直接获取到这份数据

• API

1. useModel

import { useModel } from 'umi';
export default () => {// refresh : 重新执行 getInitialState 方法，并获取新数据// setInitialState : 手动设置 initialState 的值，手动设置完毕会将 loading 置为 falseconst { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState');return <>{initialState}</>
};

plugin-model

启用：src/models 目录下有 hooks model 时启用。(与dva的差别为dva导出的是对象，hooks model导出函数,所谓 hooks model 文件，就是自定义 hooks 模块)
des: 文件名则对应最终 model 的 name，通过插件提供的 API 来消费 model 中的数据。

// 定义hooks model
import { useState, useCallback } from 'react'
export default function useAuthModel() {const [user, setUser] = useState(null)const signin = useCallback((account, password) => {// signin implementation// setUser(user from signin API)}, [])const signout = useCallback(() => {// signout implementation// setUser(null)}, [])return {user,signin,signout}
}

import { useModel } from 'umi';
export default () => {const { user, fetchUser } = useModel('useAuthModel', model => ({ user: model.user, signout: model.signout,signin: model.signin }));return <>hello</>
};
// useModel的两个参数：
// namespace - 就是 hooks model 文件的文件名，如上面例子里的 useAuthModel
// updater - 可选参数。在 hooks model 返回多个状态，但使用组件仅引用了其中部分状态，并且希望仅在这几个状态更新时 rerender 时使用（性能相关）