1、dvajs是一个轻量级的应用框架。
2、新建dva项目，直接dva new 项目名称
3、启动npm start
4、dvajs的路由跳转，
方式一：通过link跳转，首先引入Link，
import {Link} from 'dva/router'然后，在需要调转的地方使用
<Link to='/'>首页</Link>方式二：
通过点击事件，进行跳转，this.props.history.push(‘/’);
5、参数的传递
方式 一：
通过params
1.路由表中
<Route path=' /user/:id ' component={User}></Route>
2.Link处
HTML方式
<Link to={ ' /user/ ' + ' 2 ' } activeClassName='active'>XXXX</Link>
JS方式
this.props.history.push( '/user/'+'2' )
3.user页面
通过 this.props.params.id 就可以接受到传递过来的参数（id）
方式 二：
通过query
前提：必须由其他页面跳过来，参数才会被传递过来
注：不需要配置路由表。路由表中的内容照常：<Route path='/user' component={User}></Route>
1.Link处
HTML方式
<Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>
JS方式
this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })
2.user页面
this.props.location.query.day
方式 三：
通过state
同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏
1.Link 处
HTML方式：
<Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}>
JS方式：
this.props.history.push({ pathname:'/user',state:{day : 'Friday' } })
2.user页面
this.props.location.state.day
6、子组件使用，封装子组件都是在components文件夹里边定义的，使用的时候引入即可。
但是，子组件中路由跳转有些问题，子组件this.props中没有history,因此不能实现路由跳转，如果非要操作，可以使用一个高阶组件包裹一下，就可以给this.props添加一个history，具体实现方法为：首先在子组件中引入withRouter高阶组件，然后在抛出子组件的时候使用高阶组件包裹一下即可，这样打印出内容就有history了。
7、dvajs默认的是使用哈希路由，怎么使用后边不带#好的路由呢？
官方文档上是有说明的，知识地图的 “切换 history 为 browserHistory”
具体操作步骤为：先下载npm install --save history然后修改入口文件相应的内容，index.js文件，将const app = dva();替换成import createHistory from 'history/createBrowserHistory';const app = dva({ history: createHistory(),});保存之后，就切换成不带#的路由了，但是会报错，只需要将引入改成如下形式即可，import {createBrowserHistory as createHistory} from 'history';8、models为redux和react-saga改装，用来存放数据的。1、首先先在models下定义，indexModels.js文件2、然后在入口文件index.js中引入models。3、在需要使用数据的页面开始使用数据，首先像redux一样引入connectimport { connect } from 'dva';
其次定义mapStateToProps函数，其中state参数就是models中定义的state数据。const mapStateToProps=state=>{
console.log(state);
return {
msg:'我是首页，数据传递'
}
}
当前页面在声明周期函数中使用this.props就能获取到msg数据。componentDidMount(){
console.log(this.props);
}
同理，如果要想获取到models里边的name，需要先在return中处理下。const mapStateToProps=state=>{
console.log(state);
return {
msg:'我是首页，数据传递',
name:state.indexModels.name
}
}
然后通过this.props.name就能获取到models中state里的name值了。最后别忘了抛出组件，使用connect包裹export default connect(mapStateToProps)(IndexPage);
此时打印this.props会发现多一个dispatch。 | | |
| | |
| | |
| | |
| | |
| | |
4、如果需要更新数据，需要在models中配置reducers，定义好reducers之后，在需要使用的界面，怎样触发行为呢？此时不用像redux那么麻烦定义常量来判断触发的是哪一个行为，在dva中只需要使用This.props.dispatch({type:’indexModels/setName’});即可。通过type来自动判断触发哪一个事件，type顺序为models命名空间名，后边跟上该空间下的某个函数。5、接下来修改原来state中的名字为金刚影在reducers中使用相应东西接收一下，其中由于直接改变state，原来地址指向没有发生变化，不会造成视图变化，此时修改下state地址即可。6、异步effects，和reducers使用方法类似。定义一个方法，在需要使用的页面中，触发dispatch，触发该事件这样就会执行effects里边的setNameAsync函数，其中put是触发一个行为，所以给setNameAsync函数put一个type值，触发当前reducers中的setName执行reducer后，就会触发改变名字。其中call用于调用接口。 7、接口数据调用（1）、给按钮绑定一个事件名为textCode， textCode(){
this.props.dispatch({
type:'indexModels/textCode',
});
}
触发该函数之后在函数内部调用异步网络请求。（2）请求到数据后，触发数据更新的行为，再将数据渲染到页面中调用接口后，将从接口请求过来的数据赋值给state中的nodeList,此时数据已经存在store中。（3）在按钮所在页面中通过mapStateToProps 将数据读过来，在需要使用的地方this.props.nodeList获取该数据。const mapStateToProps=state=>{
console.log(state);
return {
msg:'我是首页，数据传递',
name:state.indexModels.name,
nodeList:state.indexModels.nodeList
}
}
8、Subscriptions监听，有两个参数dispatch和history，可以用来触发行为也可以用来监听路由变化。subscriptions:{
haha({dispatch,history}){
// console.log('runing');
history.listen(({pathname})=>{
if(pathname==='/user'){
console.log('您当前正在浏览用户页');
}
})
}
}8、mock数据，参考官方网站
扫一扫
2424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
