umi.js-使用dva(学习笔记)

使用dva

官方插件集 umi-plugin-react
文档：https://umijs.org/zh/plugin/umi-plugin-react.html

dva插件和umi整合后，将模型分为两种：

1. 全局模型：所有页面通用，工程一开始启动后，模型就会挂载到仓库
2. 局部模型：只能被某些页面使用，访问具体的页面时才会挂载到仓库

定义全局模型

在src/models目录下定义的js文件都会被看作是全局模型，默认情况下，模型的命名空间和文件名一致。

定义局部模型

局部模型定义在pages文件夹或其子文件夹中，在哪个文件夹定义的模型，会被该文件夹中的所有页面以及子页面、以及该文件夹的祖先文件夹中的页面所共享。

局部模型的定义和全局模型的约定类似，需要创建一个models文件夹

umirc.js

export default {
    plugins: [
        ["umi-plugin-react", {
            title: true, //开启title插件
            dva: true, //开启dva插件
            immer: true, //开启immer插件
            routes: {
                exclude: [/.*\/models\/.*/, /.*\/model\.js/]
            }
        }]
    ]
}

components组件
和直接使用dvajs一样,因为安装了umi-plugin-react,所以里面包含了dva,直接引用就行

import React from 'react'
import { connect } from "dva"

function Counter({ number, onIncrease, onDecrease }) {
    return (
        <div>
            <h1>{number}</h1>
            <p>
                <button onClick={onDecrease}>减</button>
                <button onClick={onIncrease}>加</button>
            </p>
        </div>
    )
}

const mapStateToProps = state => ({
    number: state.counter
})

const mapDispatchToProps = dispatch => ({
    onDecrease() {
        dispatch({ type: "counter/decrease" })
    },
    onIncrease() {
        dispatch({ type: "counter/increase" })
    },
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter);