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(
)
}
}
希望有所帮助