umi model 注冊

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/b/models/**/*.js + pages/a/models/**/*.js，依次類推
• 約定 model.js 為單文件 model，解決只有一個 model 時不需要建 models 目錄的問題，有 model.js 則不去找 models/**/*.js

舉個例子，

+ src
  + models
    - g.js
  + pages
    + a
      + models
        - a.js
        - b.js
        + ss
          - s.js
      - page.js
    + c
      - model.js
      + d
        + models
          - d.js
        - page.js
      - page.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

#配置及插件

之前在 src/dva.js 下進行配置的方式已 deprecated，下個大版本會移除支持。

在 src 目錄下新建 app.js，內容如下：

export const dva = { config: { onError(e) { e.preventDefault(); console.error(e.message); }, }, plugins: [ require('dva-logger')(), ], }; 

#FAQ

#url 變化了，但頁面組件不刷新，是什么原因？

layouts/index.js 里如果用了 connect 傳數據，需要用 umi/withRouter 高階一下。

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

#如何訪問到 store 或 dispatch 方法？

window.g_app._store window.g_app._store.dispatch 

#如何禁用包括 component 和 models 的按需加載？

在 .umirc.js 里配置：

export default { plugins: [ [ 'umi-plugin-react', { dva: { dynamicImport: undefined // 配置在dva里 }, dynamicImport: undefined // 或者直接寫在react插件的根配置，寫在這里也會被繼承到上面的dva配置里 } ], ], }; 

#全局 layout 使用 connect 后路由切換后沒有刷新？

需用 withRouter 包一下導出的 react 組件，注意順序。

import withRouter from 'umi/withRouter'; export default withRouter(connect()(Layout));