dva 简单使用流程

最新推荐文章于 2023-09-27 10:04:17 发布

你好顾碗秋

最新推荐文章于 2023-09-27 10:04:17 发布

阅读量455

点赞数

文章标签：前端 js

本文链接：https://blog.csdn.net/mengfanyue123/article/details/120760808

版权

import { connect, history } from '@alipay/bigfish'; 引入connect

const Flowline = (resultContent,analysisChartData，dispatch)=>{
// resultContent, analysisChartData 都可以直接打印到 相当于props传参
1.... 发送dispatch
  const showDrawer = () => {
    setVisible(true);
    dispatch({
      type: 'analysis/saveHistory',  // 找文件 analysis是文件名字 saveHistory 是 model里面的*dispatch名字
      payload: {
        tntInstId: 'MYBKC1CN',
        ownerId: '264765',
        // eslint-disable-next-line object-shorthand
        modeId: modeId,
        datasetId: dataSetId,
        processId: '',
      },
    });
  };
<a color="#1890FF" onClick={showDrawer} style={{ marginRight: '12px' }}>
            历史记录
          </a>
          
}
export default connect(({ analysis, loading, bookMark, kanban }) => ({// 仓库命名空间名字
  resultContent: analysis.resultContent,
  analysisChartData: analysis.analysisChartData,
  groupTagList: analysis.groupTagList,
  loadingChartData: loading.effects['analysis/startFlowAnalysis'],
  loadingfunnel: loading.effects['analysis/startFlowfunnelInfo'],
  loadingsaveHistory: loading.effects['analysis/saveHistory'],
  analyzeModeList: kanban.analyzeModeList,
  savehistory: analysis.savehistory,  //直接可以拿到
  verifyData: analysis.verifyData,
  editShowData: analysis.saveresultdata,
}))(Flowline);// Flowline 抛出的div

2… 进入model文件夹找analysis文件
在这里插入图片描述

2...............
serive接口页面
  // ../service/analysisService页面  查询历史接口
  // 查询历史列表
export async function History(params = {}) {
  return request('/datainsight/history/history', {
    method: 'GET',
    params,
  });
}

3.............
//model 页面  引入接口 
import {
  Verify,
  History,
} from '../service/analysisService';

// model的state
  state: {
  savehistory：{}
  },
  *saveHistory({ payload }, { call, put }) {// 发送dispatch
   **** 注意 History 即接口
      const response = yield call(History, payload);
      if (response && response.success) {
        yield put({
          type: 'save',//识别码
          payload: response.resultContent.records,
        });
      }
    },
      save(state, { payload }) {// 接受dispatch 存值
      const payloads = payload.sort((a, b) => {
        return b.time - a.time;
      });
      return {
        ...state,
        savehistory: payloads, // 把值存起来到state savehistory 中
      };
    },

// 使用：dva的state文件

export default connect(({ analysis, loading, bookMark, kanban }) => ({// 仓库命名空间名字
  savehistory: analysis.savehistory,  //直接可以拿到
}))(Flowline);// Flowline 抛出的div
直接props中拿