dva 使用装饰器

dva框架对用户可以说是非常的友好的，它只有6个API。

• use 注册所需要使用的插件
• model 挂载所需要的模块
• router 挂载路由
• start 项目的启动
• unmodel 清除模块
• replaceModel 替换模块

Model API

model 语义化理解模块，其实model就相当于react中的redux仓库一样,但是它又跟vuex里面的执行机制很相似下面简单介绍一下model中都有那些东西：
注意：在编写自定义模块的时候，模块中添加字段 namespace：模块名

1、state

state这个东西已经是再熟悉不过了，它里面存放一些全局需要的状态或数据，来供全局使用，

2、effects

effect 中文就是效率，效应的意思，它的作用就相当于vuex中的 actions 的机制一样执行一些异步操作，异步代码，和修改state中的转态，他会接收两个参数，actions 和 callback actions它是一个Promise对象，callback就是一些回调函数，这个作为了解。在编写的过程当中代码如下：

 *save({ payload }, { call, put, }) {
    //第一个参数解构一个payload，第二个参数解构一个call，put，
       //payload 它就是调用 save 函数时传递的参数，
    //使用call put 是前面要加  yield
    },

假设：effect中有两个函数，a、b 想要在a中调用b 同样的操作

  effects: {
    *a({ payload }, { call, put }) {
     yield put({
             type:'a'
         })
    },
    *b({ payload }, { call, put, }) {
      console.log('在a中调用的')
    },
  },

3、reducers

reducer相当于vuex中的 motations 的作用是相同的，它只提供修改 state状态的函数，但不是真正意义上的修改state，需要在effect中调用函数才能达到状态的修改，说到这里越来越感觉这是不是第二个vuex呢？太相似了。

effects: {
    //注册
    *registerUser({ payload }, { call, put }) {
     yield put({
                 type:'changeState',
               payload:{
            //传递参数
          }
         })
    },
}
reducers: {
    //修改状态
    changeState(state, action) {
      //state是当前所保持的状态
      //action是调用函数传递的参数
      return {//使用ES6解构的方法，修改数据
        ...state,
      ...action.payload
      };
    },
  },

下载包

cnpm i @babel/preset-react @babel/plugin-proposal-decorators -D

配置.babelrc

{
    "presets": [
        "@babel/preset-react",
        "react-app"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
}