dva用法

原创已于 2023-03-22 18:16:56 修改 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #typescript

于 2023-01-13 17:34:17 首次发布

该文章介绍了在Dva.js框架下，如何通过connect函数连接组件和状态，以及如何利用reducers和effects处理数据。具体展示了fetchData方法来获取表格数据，并通过request库调用API。同时，文章提到了如何设置命名空间和处理表单提交的状态。

建立文件夹

引入

import { connect } from 'dva'

抛出修改

export default connect(state => {

    return {

        data: state.work.data//引入数据,work是你的models页面的名字,data是页面里面的数据

    }

})(Work)//页面名称,可自定义

function Work(props) {}

解析

const { dispatch} = props

调用方法

dispatch({

            type: 'work/fetchData',//名字+方法

            payload: {//传递的参数

                page: 1,

                limit: 15,

            }

        })

index.js

import { history } from 'umi'; // 跳转方法

import request from '@/utils/request';//引入axios

import api from '@/services';


// 所有请求接口的数据都放到 dva

export default {

  // 命名空间跟文件夹名字一样

  namespace: 'work',



  state: {

    data: [], //表格数据

  },

  reducers: {

    setTable(state, { payload }) {

      const { list, count } = payload.data;

      return {

        ...state,

        data: list,//修改表格数据

        count, // 总条数

      };

    },

  },

  effects: {

    // 提交表单

    *fetchData({ payload }, { call, put, select }) {

      // payload: 参数

      const res = yield call(() =>

        request.get('/dev/adminapi/app/wechat/kefu', payload),

      );



      if (res.msg === 'ok') {

        yield put({//调用方法修改数据

          type: 'setTable',

          payload: res,

        });

      }

    },
     // 按钮
    *fetchStatus({ payload }, { call, put }) {
      const res = yield call(api.getSmapleStatus, payload);
      // console.log(res);
      if (res.status == 200) {
        return res.msg;
      }
    },

  },

};