【dva】dva的基本用法

services

该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数)

const finishTask = {

  query: (params) =>

    request({ url: '/app/data, method: 'POST', data: params })

};

export{

  finishTask

}

models

该文件夹为dva的核心之一,这个文件夹里主要是存储数据、处理数据等关键功能的地方.他的写法如下

export default {

  namespace: "base", //model的名称,必须是唯一的标记

  state: {   //数据

    list:[]

  },

  subscriptions: {

    setup({ dispatch, history }) {

      return history.listen(({ pathname }) => {//当history发生变化时就会进入到此函数

        //可以在此函数中根据pathname的变化去dispatch

      });

    },

  },

  effects: {

    *getData({ payload = {} }, { select, call, put }) {

      const data = yield call(query,payload); //query就是services里面的函数,需要从services里面import

      const list = yield select((state) => state.base.list); //从本model里面获取state里面的list

      yield put({

        type: 'save', payload: {

        list:data

      } });//通过reducers去修改本model里面的数据

    }

  },

  reducers: {

    save(state, action) {

      return { ...state, ...action.payload };//必须返回一个新的action

    }

  }

};

view

接下来讲如何在view端,即页面或者组件中去使用models里面的函数和数据

import { useSelector, useDispatch } from 'dva';

1.useSelector

这个函数的作用是拿到models里面的state

 const {list}= useSelector((state) => state.base);

2.useDispatch

这个函数会返回你一个dispatch函数,

 const dispatch = useDispatch();

拿到这个函数之后你可以通知models里面的effect对应的函数执行

 dispatch({

      type: 'base/getData', //必须传一个type告诉dva你要执行哪个model里面的那个effect

      payload: {

        id:1            //写上你要传的参数

      },

    });

只要你发起了dispatch,effect便会执行services里面的函数去调接口,然后再根据effect里面写的逻辑去处理数据,接着通过reducers里面的函数返回一个新的action去通知view有更新.view拿到新的action之后便会重新渲染,这个时候useSelector会重新执行一遍拿到新的state.整个流程便完成了.

巴特西