dva基本用法
2024-09-08 02:56:17
1. npm install -g dva-cli 全局安装dva.
2. dva new myApp --demo 创建dva项目.
3. cd myApp npm start 启动项目.
4. 定义 model (1) 先设计model (2) 在设计 component (3) 连接 model 和 component .
5. 在model中定义state(在state里初始话store里的数据)，effects(相当于action)，reducers
执行过程：
(1)在组件中的this.props.dispatch()方法里派发一个对象给effects，对象里包含一个类型和要派发的内容如：{type:'filename/bikeAllInfo(effectsname)',payload:value} (2)model里的effects接收到后通过put方法再派发一个类型和内容的对象给reducers 如：
* bikeAllInfo({ payload }, { put }){
yield put({
type: "setBikeAllInfo(redusersname)",
payload："value"
})
}
（3）model里的reducers接收到bikeAllInfo派发来的内容后, 对在model里state中定义的变量和接收到的值进行组合保存到store中然后就可以在组件中的this.props中调用
setBikeAllInfo (state, action) {
let bikeAllInfo = action.payload || {}
return Object.assign({}, state, {
bikeAllInfo,
})
},
6.在组件中引入 import {connect} from 'dva'; 导出时用connect进行组件的连接
const mapStateToProps = (state) => {
return {
state
}
};
export default connect(mapStateToProps)(组件名);
最新文章
- linux打包与压缩
- Java中的枚举
- php中的常用数组函数（三）（获取数组交集的函数们 array_intersect()、array_intersect_key()、array_intersect_assoc()、array_intersect_uassoc()、array_intersect_ukey()）
- MySQL与Oracle 差异比较之一数据类型
- careercup-中等难度 17.5
- python - socket练习（输入系统命令）
- 添加解压缩版Tomcat到系统服务
- 去除List列表中反复值（稍作调整，也适合于List<T> 和 List<?>）
- Hibernate的一些相关信息
- weak和assign区别
- 【转】Oracle系列导航目录
- 腾讯技术分享：GIF动图技术详解及手机QQ动态表情压缩技术实践
- [HAOI 2015]按位或
- 轮播图(jQuery)
- 【转】 CRC循环冗余校验码
- Java提高篇（转）
- linux CentOS 7 安装 RabbitMQ 3.6.3, Erlang 19.0
- mysql查改
- salt-stack更换主机名
- python_发送短信脚本