ant design pro项目中，关于dvajs的models使用方法

ant design pro在它的框架下，模块化程度特别的高。pages、models、services、utils/request服务都进行分离

src/models用于存放全局的models，src/pages/models用于存放页面的models。

参考dvajs的使用网址

之前学习的时候，不知道如何dispatch传参和绑定models于页面上。模仿antd pro项目文件中的src/pages/models和页面文件也可以学到，但对于初学前端的来说还是有一定 的困难，在这里仅仅分享一点我的浅见，以期读者能更上一层楼。

//src/pages/element/models/compay.js

//有关页面的数据都放在页面的models下，这里举一个获取公司信息的例子


//与后台数据的交互需经由service来完成请求任务
//这里有两个服务，一个是请求公司信息的服务，一个是保存修改后公司新信息的服务

import { queryCompanyInfo,saveCompanyInfo} from '@/services/api';

export default{

    //这里给models的命名需唯一，否则会报错

    namespace:'company',

    state:{
        companyInfo:'',
        num:10
        
    },
    reducers:{

        //要想改变state中的数据，必须通过reducers，
        //payload是参数
        backCompanyInfo(state,{payload:{back}}){
            // console.log(back);
            return{...state,companyInfo:back};
            
          },
        add(state){
            const NUM=state.num+1;
             return{...state,num:NUM};
        }
    },
    effects:{
        *queryCompanyInfoService({payload:{num0,num1}},{put,call}){

           //num0和num1都是从页面上dispatch派发过来的参数，在页面的js中你将看到
            console.log(num0);
            console.log(num1);
            
            //请求后台叔叔服务，介由service中的异步方法

            const data= yield call(queryCompanyInfo);

           // console.log(data);
            //打印一下，看看返回的是什么
           //这里后台返回来一个对象Object {msg: "ok", code: 200, data: Object},
            //这里data.data下放的是我们的企业信息

            //将请求到的数据返回给同步的reducers中的backCompanyInfo，
            //后面传参的键一定要和上面的backCompanyInfo接受的名字相同,

            //涉及到es6的解析语法，要想解析出相同的值，你的键必须相对应

            yield put({type:"backCompanyInfo",payload:{back:data.data}});  
        },
        *saveCompanyInfoService({payload:{newCompanyInfo}},{put,call}){

           //将从页面上获取到的新的公司信息返回给后台做保存
            //call的参数1是service的异步函数，参数2是从页面上获取到的新的公司信息

             const data= yield call(saveCompanyInfo,newCompanyInfo);
             console.log(data);

           //将后台返回的修改成功的公司数据重新放到state中去，页面将会刷新，
              yield put({type:"backCompanyInfo",payload:{back:data.data}});
              
        }
    },
}

 调取后台接口数据的异步方法一般都放在src/services/api.js中，也就是上面，在models中引入的方法

//src/services/api.js

 

//引入请求
import request from '@/utils/request';

//请求公司信息，不带models传来的参数
export async function queryCompanyInfo(){
//第一个是url，apihost已在src/utils/request.js中连接，以便后期上线调试
//第二个是option对象，一般包含接口的参数字段，method，headers，body等
  return request('/company/detail',{
            method: 'POST',
            headers:{
                'Content-Type':'application/json',
                'token':'723a96b7934b13f414ee7c866f600c49'
                },

          }
        )
}
//修改企业信息，带参数
export async function saveCompanyInfo(newCompanyInfo){
 
  return request('/company/update',{
            method: 'POST',
            headers:{
                'Content-Type':'application/json',
                'token':'723a96b7934b13f414ee7c866f600c49'
                },
            body:newCompanyInfo
            
          }
        )
}

 src/utils/request.js

export default function request(url, option) {
  url="http://192.168.199.105:8004"+url;
  const options = {
    expirys: isAntdPro(),
//用于校验，当前的apiHOST是不是，preview.pro.ant.design，主要用于官方的展示
    ...option,
  };
。。。。。。。

页面src/element/Company.js中，涉及到绑定models数据，获取绑定的models数据，以及向models传参

//1、引入connect用于绑定models
import { connect } from 'dva';

//2、绑定models与组件的props属性
@connect(({ company }) => ({
    companyInfo:company.companyInfo,//需要models中的company中什么state，就引入什么state
    
  }))
//必须放在export default前面，中间不能间隔任何语句，

export default class Company extends React.Component{
 constructor(props){
        super(props);
        this.state=({
            companyInfo:''
        })
 }
componentDidMount(){
     //派发异步请求
    //绑定models之后就可解析出dispatch
   const { dispatch} = this.props;

    //向models传参，形式牢记，请求企业信息服务

   dispatch({type: 'company/queryCompanyInfoService',payload:{num0:0,num1:1}});
//这里的dispatch也可以写成Promise形式，后面加.then,可以在dispath结束后再执行相应的操作
//也很实用，可以进一步探索 
 
}
componentWillReceiveProps(nextProps){

//第一次能获取到modals数据的地方,
//这个生命周期的nextProps能获取到你将要绑定进入props的companyInfo

console.log(nextProps.companyInfo);

//同样，你可以把companyInfo，映射到你这个类的state中去，通过使用this.setState方法
this.setState({
    companyInfo:nextProps.companyInfo
})
}
//不带参数，传给models
add=()=>{
     const { dispatch} = this.props;
    dispatch({type: 'company/addNum'});
}
//带参传给models、
queryCompany=()=>{
     const newCompanyInfo=this.state.companyInformation;
     const { dispatch} = this.props;
     dispatch({type: 'company/saveCompanyInfoService',payload:{newCompanyInfo}});
}
render(){
return(
    <div>
        <button onClick={this.add}>同步num+1</button>
        <button onCkick={this.queryCompany}>保存公司信息</button>
    </div>
)

}
}

 

 

希望有所帮助