dva

dva 就是一个react的第三方框架 dva就是对redux进行简化

dva实质上是集成了 react-router+redux+redux-saga 使用简便的语法来进行数据的统一状态管理

创建

全局下载 npm install -g dva-cli
查看版本 dva -v
cd到指定文件夹下
创建项目 dva new 名字
启动 npm start

路由

1.在routes中创建对应的路由页面

2.在src下的router.js配置路由

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
// 1.引用
import Home from './routes/home';

function RouterConfig({ history }) {return (<Router history={history}><Switch><Route path="/" exact component={IndexPage} />{/* 2.配置使用 */}<Route path="/home" exact component={Home} /></Switch></Router>);
}

export default RouterConfig;

this.props.history.push()import React, { Component} from 'react'
// 1.引用
import {Link,withRouter} from "dva/router"

class topbar extends Component {fun=()=>{// 编程式导航this.props.history.push("/")}render() {return (<div>{/* 2.使用导航 */}<Link to="/">点我去首页</Link><button onClick={this.fun}>点我去首页</button></div>)}
}
export default withRouter(topbar)

数据/状态管理

api1 model

model就是用来保存组件的数据与逻辑操作的我们可以把数据独立到model中后器方便管理

1.models文件夹中创建对应的模块文件

// 创建模块
export default {
namespace: 'example',state: {
},subscriptions: {},effects: {},reducers: {},};

2.在index.js中注册这个模块、

api2 state

1.在model中定义数据

// 创建模块
export default {
namespace: 'example',state: {// 定义数据name:"xixi",age:18},subscriptions: {},effects: {},reducers: {},};

2.在哪里用在哪里引用connect是一个函数当这个函数被调用的时候返回高阶组件

import React, { Component } from 'react'
// 1 引用connect
import {connect} from "dva"
import Tb from "../components/topbar.jsx"
class home extends Component {render() {return (<div>{/* 3.使用数据 */}home { this.props.state.homem.name}<Tb/></div>)}
}
// 2.使用connect连接数据
export default connect(state=>({state}))(home)

api3 reducers

修改state的数据 reducers中是一个个的函数每个函数都是一个修改的动作i

// 创建模块
export default {
namespace: 'homem',//命名空间state: {// 定义数据name:"xixi",age:18},subscriptions: {},effects: {},reducers: {//修改
setname(state,payload){return {...state,name:payload.data}}},};

在页面中使用dispatch()触发reducers的修改

 fun=()=>{// this.props.dispatch({type:"命名空间/reducers的名字"})this.props.dispatch({type:"homem/setname",data:"我变了"})}

api4 effects

dva中请求数据

1.写在src文件夹下的services文件夹之下

2.在services新建一个文件写入我们自己的请求

import request from '../utils/request';

export function query() {return request('http://www.weather.com.cn/data/cityinfo/101320101.html');
}

3.在自己的组件中测试请求引用使用

import React, { Component } from 'react'
// 1.引用
import {query} from "../services/homeapi.js"
export default class shop extends Component {componentDidMount() {// 2.使用query().then((ok)=>{console.log(ok);})}render() {return (<div><h1>数据请求</h1></div>)}
}

上面的请求地址是有跨域问题的

解决跨域

去找到.webpackrc 文件中写入如下内容

{
"proxy":{"/api":{"target":"http://www.weather.com.cn","changeOrigin":true,"pathRewrite":{"^/api":"/"}}}

}

千万不要忘了修改请求地址为 /api 与重启

dva怎么请求异步数据

1.在effect中进行数据的请求发送

import {query} from "../services/homeapi.js"
// 创建模块
export default {
namespace: 'homem',//命名空间state: {// 定义数据name:"xixi",age:18},subscriptions: {},effects: {//  1.新建一个effect函数用来容纳请求// call 就是用来包装请求的  并且返回成功的值*demolink({payload},{put,call}){// 2.引用请求// 3.使用请求let data=yield call(query)console.log(data)}},reducers: {//修改
setname(state,payload){return {...state,name:payload.data}}},};

如何触发effects进行异步操作

this.props.dispatch({type:"命名空间的名字/effects的名字"})

import React, { Component } from 'react'
// 1.引用
// import {query} from "../services/homeapi.js"

import {connect} from "dva"class shop extends Component {// componentDidMount() {//     // 2.使用//     query().then((ok)=>{//         console.log(ok);//     })// }fun=()=>{// 触发effectsthis.props.dispatch({type:"homem/demolink"})}render() {return (<div><h1>数据请求</h1><button onClick={this.fun}>点我请求</button></div>)}
}
export default connect(state=>({state}))(shop)

3.把请求来的数据通过put（）传递给reducers进行修改

effects: {//  1.新建一个effect函数用来容纳请求// call 就是用来包装请求的  并且返回成功的值// put是用来触发reducers修改的*demolink({payload},{put,call}){// 2.引用请求// 3.使用请求let data=yield call(query)console.log(data.data.weatherinfo.city)
// 4我们需要把请求来的数据交给reducers修改state// yield put({type:"reducers的名字",data:你传递的数据})yield put({type:"setname",data:data.data.weatherinfo.city})}},

4.新建对应的reducers来进行修改

reducers: {//修改
setname(state,payload){return {...state,name:payload.data}}},

api5 subscriptions

subscriptions 相当与是一个监听器他可以监听任何程序中的变化比如鼠标键盘服务器等变化只要被监听那么事件触发他就会被执行

 subscriptions: {demo(){window.onresize=()=>{console.log("变了")}}},

dva 路由/导航/相关推荐

前端学习（2705）：重读vue电商网站26之路由导航守卫控制访问权限
如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面. 在之前的操作中,我们登录之后会种植一个 token 值,表示我们登录成功了,那么此时我们将 token 值去掉呢? 直接点击 ...
axios请求拦截器、响应拦截器、vue-router路由导航守卫的使用(案例)
axios官方文档一.请求拦截器设置headers,给所有请求加上Authorization:token值二.响应拦截器直接去访问/article,发现可以进入到article内容管理页面原 ...
vue-router进阶：路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
网站安全配置---挂载路由导航
视频地址: https://www.bilibili.com/video/BV1af4y1N78B 实现: 挂载路由导航-创建安全网站登录代码: // 挂载路由导航守卫 router.beforeE ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
(转)Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航
安装vue-router模块使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...
hach vue 跳转_Vue路由实现、路由导航、路由模式
1.$router和$route区别 router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象,和router-link跳转一样,this. ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...

dva 路由/导航/

dva

创建

路由

导航