首先创建models文件夹

符合以下规则的文件会被认为是 model 文件：

src/models 下的文件
src/pages 下，子目录中 models 目录下的文件
src/pages 下，所有model.ts 文件(不区分任何字母大小写)

然后在models文件夹写以下代码

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';export interface IndexModelState {name: string;
}export interface IndexModelType {namespace: 'index';state: IndexModelState;effects: {query: Effect;};reducers: {save: Reducer<IndexModelState>;// 启用 immer 之后// save: ImmerReducer<IndexModelState>;};subscriptions: { setup: Subscription };
}const IndexModel: IndexModelType = {namespace: 'index',state: {name: '',},effects: {*query({ payload }, { call, put }) {},},reducers: {save(state, action) {return {...state,...action.payload,};},// 启用 immer 之后// save(state, action) {//   state.name = action.payload;// },},subscriptions: {setup({ dispatch, history }) {return history.listen(({ pathname }) => {if (pathname === '/') {dispatch({type: 'query',});}});},},
};export default IndexModel;

在.umirc.ts进行开启

dva: {immer: true,
}

在其他组件进行使用

import React from 'react';
import { IndexModelState, ConnectRC, Loading, connect } from 'umi';interface PageProps {index: IndexModelState;loading: boolean;
}const IndexPage: ConnectRC<PageProps> = ({ index, dispatch }) => {const { name } = index;return <div>Hello {name}</div>;
};export default connect(({ index, loading }: { index: IndexModelState; loading: Loading }) => ({index,loading: loading.models.index,}),
)(IndexPage);

如何实现增删改的一个效果

models.ts文件中写以下代码

import { Effect, ImmerReducer, Reducer, Subscription } from 'umi';
const IndexModel: IndexModelType = {namespace: 'index',state: {todolist: [{id: 1,name: "蜘蛛侠",age: 18,},{id: 2,name: "钢铁侠",age: 18,},{id: 3,name: "蝙蝠侠",age: 18,}],},effects: {*query({ payload }, { call, put }) { },},reducers: {// 启用 immer 之后save(state, action) {return {...state,...action.payload,};},pushtodolist(state, action) {// console.log(state, action);state.todolist.push(action.action)// return {//     ...state,//     ...action.payload,// };},deletetodolist(state, action) {state.todolist = state.todolist.filter((res, index) => {return res.id != action.action})},edittodolistdata(state, action) {state.todolist = state.todolist.filter((res, index) => {if (res.id == action.action.id) {res.name = action.action.name}return res})}},subscriptions: {setup({ dispatch, history }) {return history.listen(({ pathname }) => {if (pathname === '/') {dispatch({type: 'query',});}});},},
};export default IndexModel;

组价文件中写以下代码

import React, { useState } from 'react'
import { connect } from "umi"
function Index(props: any) {// 添加function pushtodolist(event: any) {if (event.keyCode == 13) {let obj: any = {id: Date.now(),name: event.target.value,}// console.log(obj);props.dispatch({type: "index/pushtodolist",action: obj})}}// 删除function deletetodolist(id: any) {props.dispatch({type: "index/deletetodolist",action: id})}// 控制修改变成input的弹出框const [editinput, seteditinput] = useState()// 修改function edittodolist(data: any) {console.log(data);seteditinput(data.id)seteditinputafter(data.name)}function edittodolistdata(id: any) {seteditinput("")let obj ={id:id,name:editinputafter}props.dispatch({type: "index/edittodolistdata",action: obj})}// 控制修改之后的值const [editinputafter, seteditinputafter] = useState("")function onchangetodolist(e: any) {seteditinputafter(e.target.value)}return (<div><input type="text" onKeyDown={pushtodolist} />{props.todolist123.map((res: any) => {return <div key={res.id}>{res.name}<button onClick={() => { deletetodolist(res.id) }}>删除</button><button style={{ display: editinput == res.id ? "none" : "" }} onClick={() => { edittodolist(res) }}>修改</button><button style={{ display: editinput == res.id ? "" : "none" }} onClick={() => { edittodolistdata(res.id) }}>确定</button><input style={{ display: editinput == res.id ? "" : "none" }} type="text" defaultValue={res.name} onChange={onchangetodolist} /></div>})}</div >)
}export default connect((state: any) => {return {todolist123: state.index.todolist}
},
)(Index);

umi中@umijs/plugin-dva的使用，及实现一套增删改相关推荐

OA中项目关系，实体设计，映射实体，增删改查
=============== 步骤 ================ 1,充分了解需求(包括所有的细节):分析页面等. 2,设计实体/表正向工程:设计实体 --> 建表(推荐):设计实体 ...
java中的数组增删查改操作,java数组实现增删改查
java 实现动态数组,Java工具类Arrays中不得不知的常用方法,数组实现队列java,java数组实现增删改查 java 增删改查代码 import java.sql.Connection; ...
python中的切片能否修改元祖_Python列表的增删改查和元祖
一.定义列表 1.names = ['mike','mark','candice','laular'] #定义列表 2.num_list = list(range(1,10)) #range生成1-1 ...
python中系列的含义_python中四种组合数据类型的含义、声明、增删改查，遍历
一.列表列表:list 可以存储多个有顺序的可以重复的数据的类型其他语言:数据:python中~提供的是列表[不说数组] 列表:操作数据:增加.删除.修改.查询 [CRUD] append/ins ...
2.关于QT中数据库操作，简单数据库连接操作，数据库的增删改查，QSqlTableModel和QTableView，事务操作，关于QItemDelegate 代理
Linux下的qt安装,命令时:sudoapt-get install qt-sdk 安装mysql数据库,安装方法参考博客:http://blog.csdn.net/tototuzuoquan ...
java中ArrayList用法详解，基本用法（含增删改查）
1.什么是ArrayList ArrayList就是动态数组,它提供了 ①动态的增加和减少元素 ②实现了ICollection和IList接口 ③灵活的设置数组的大小 ArrayList是一个其 ...
Django框架(4.django中进入项目的shell之后对数据表进行增删改查的操作)
django设计模型类.模型类生成表.ORM框架简介:https://blog.csdn.net/wei18791957243/article/details/88657270 数据操作完成数据表的 ...
Python中用户管理（用户的登陆、用户的增删改查）
一.用户登陆题目要求: 1.系统里面有多个用户,用户的信息目前保存在列表里面 users = ['root','westos'] passwd = ['123','456'] 2.用户登陆(判断用户 ...
使用umi快速搭建项目以及如何在umi中使用dva进行状态管理
一.创建umi应用 1.新建umi应用并启动 mkdir umi && cd umi yarn create @umijs/umi-app yarn yarn start 2.umi应 ...

umi中@umijs/plugin-dva的使用，及实现一套增删改

umi中@umijs/plugin-dva的使用

首先创建models文件夹

然后在models文件夹写以下代码

在.umirc.ts进行开启

在其他组件进行使用

如何实现增删改的一个效果

umi中@umijs/plugin-dva的使用，及实现一套增删改相关推荐

最新文章

热门文章