和 dva 一起用

    • 按目录约定注册 model，无需手动
    • 文件名即 namespace，可以省去 model 导出的 namespace key
    • 无需手写 router.js，交给 umi 处理，支持 model 和 component 的按需加载
    • 内置 query-string 处理，无需再手动解码和编码
    • 内置 dva-loading 和 dva-immer，其中 dva-immer 需通过配置开启
    • 开箱即用，无需安装额外依赖，比如 dva、dva-loading、dva-immer、path-to-regexp、object-assign、react、react-dom 等

    用 yarn 安装依赖，

    如果你用 npm，执行 npm install —save umi-plugin-dva。

    然后在 .umirc.js 里配置插件：

    1. export default {
    2.   plugins: ['umi-plugin-dva'],
    3. };
    1.   plugins: [
    2.     ['umi-plugin-dva', { immer: true }],
    3.   ],
    4. };

    model 分两类，一是全局 model，二是页面 model。全局 model 存于 /src/models/ 目录，所有页面都可引用；页面 model 不能被其他页面所引用。

    规则如下：

    • src/models/*/.js 为 global model
    • src/pages//models//*.js 为 page model
    • global model 全量载入，page model 在 production 时按需载入，在 development 时全量载入
    • page model 为 page js 所在路径下 models/*/.js 的文件
    • page model 会向上查找，比如 page js 为 pages/a/b.js，他的 page model 为 + pages/a/models//*.js，依次类推
    • 约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找 models/*/.js
      举个例子，

    如上目录：

    • global model 为 src/models/g.js
    • /a 的 page model 为 src/pages/a/models/{a,b,ss/s}.js
    • /c 的 page model 为 src/pages/c/model.js
    • /c/d 的 page model 为 src/pages/c/model.js, src/pages/c/d/models/d.js
    1. import { message } from 'antd';
    3. export function config() {
    4.   return {
    5.     onError(err) {
    7.     },
    8.     initialState: {
    9.       global: {
    10.         text: 'hi umi + dva',
    11.       },
    12.     },
    13.   };
    14. }

    layouts/index.js 里如果用了 connect 传数据，需要用 umi/withRouter 高阶一下。

    1. import withRouter from 'umi/withRouter';
    3. export default withRouter(connect(mapStateToProps)(LayoutComponent));

    在 .umirc.js 里配置：

    1. export default {
    2.   disableDynamicImport: true,
    3. };

    需用 withRouter 包一下导出的 react 组件，注意顺序。

    2. export default withRouter(connect()(Layout));