一、dvajs框架的搭建
1.安装nodejs
2.安装dva-cli并确保版本是0.9.1或以上
$ npm install -g dva-cli
$ dva -v
dva-cli version 0.9.1
3.创建新应用
$ dva new dva-quickstart
这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能
cd进入dva-quickstart目录，并启动开发服务器
$ cd dva-quickstart
$ npm start
接下来若看到dva的欢迎界面则启动成功
4.安装antd
$ npm install antd babel-plugin-import --save
二、配置model
1.在src/index.js文件中注册model(单一)
注册products这个model
app.model(require('./models/products').default)
2.在src/index.js文件中注册model(多个)
如果有多个model需要注册，可以在models文件夹下创建index.js文件并在其中写入
const context = require.context('./', false, /\.js$/);//这里的false表示不遍历文件夹
export default context
.keys().filter(item => item != './index.js').map(key => context(key))
然后再到src/index.js将
app.model(require('./models/products').default)
改成(记得将context给import进来)
context && context.forEach(item => {
app.model(item.default)
});
以上方法并不唯一，可以自行百度
三、使用dvajs
1.model的属性
export default {
namespace: "xxx",
state: {
},
reducers: {//用来修改数据模型的state。
save(state,actions){
}
},
effects: {
//effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。
这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。
*fetch(actions,{put,call,select}){
put({type:"xxx/save"})
}
},
subscriptions: {//触发器
}
}
①namespace为model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间
②state属性 model中用于数据存储
③effects用于处理异步操作和业务逻辑，不能直接修改state，由action触发，可以触发action，可以和服务器进行交互，可以获取全局state的数据。effects 有三种属性 put, call, select
put：用于触发action
put({type:"xxx/save"})//type值为定义的namespace+reducer的名字
call：用于调用异步逻辑，支持promise
const data = yield call(queryList, payload)//queryList是调用接口的函数,payload是传递的参数
select：用于从state中获取数据
const data = yield select(state => state.指定的namespace.某一个reducer的名字)
例如：
const TestModel = {
namespace: "test",
state: {
data: [1, 2, 3]
},
effects: {
* fetch({ payload }, { select }) {
const data = yield select(state => state.test.data)
console.log(data) // [1, 2, 3]
}
/**
* 通过select 获取state中的数据, test为namespace名
*/
}
}
④subscription 是订阅，用于订阅一个数据源，根据需要dispath相应的action，在app.start()时被执行
数据源可以是当前的时间，服务器的websocket链接，keyboard输入（鼠标，键盘），geolocation变化，history路由变化等
2.在组件中用connect连接model
export default connect(
({ products }) => ({
products,
})
)(Products)
这样就可以直接取到reducer中的值了
3.在组件中使用model
//调用reducers
dispatch({
type:"定义的namespace/定义的reducer"
})
//调用effects
dispatch({
type:"定义的namespace/定义的effect"
})
4.解决跨域问题（代理方法）
这里的请求地址是http://apis.juhe.cn/xzpd/query
找到.webpackrc文件，加入
"proxy":{
"/apis": {//代理标识
"target":"http://apis.juhe.cn/xzpd",//指向的实际地址
"changeOrigin": true,//允许跨域
"pathRewrite": {"^/apis": "" }//将/api转换成空字符
}
}
调用时
export function get(){
return request(`/apis/query`)
}
还有其他方式解决跨域，请自行百度
