umi4使用状态管理dva

这篇具有很好参考价值的文章主要介绍了umi4使用状态管理dva。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.在config.js中配置dva

export default defineConfig({
...,
 monorepoRedirect: { peerDeps: true },
 dva:{} //开启dva
})

2.在src中创建models文件并新建文件

models/documentChange.ts文章来源地址https://www.toymoban.com/news/detail-523793.html

export default {
    // models命名空间,需全局唯一
    namespace: 'documentChange',           
    // models存储的数据store                  
    state: {
        dataList: 1,
        hasdetailRow:false
    },
     // 更新store,用新数据合并state的旧数据                                
    reducers: {
        save(state, { payload }) {                    
            return { ...state, ...payload };
        }
    },
}

3.在组件中使用

import { connect } from 'dva';
const RequirementDetails: React.FC<{
  headerInfoRef:any
}> = (props) => {
  const { headerInfoRef } = props
  const click = (() => {
    // 通过dispatch 调用文件下的save 改变dva 下 system 的 state的状态值
    props?.dispatch({
     type: 'documentChange/save', // type,命名空间/reducers方法名
     payload: {
       hasdetailRow: props.documentChange.dataList++// payload,参数
     },
   });
  })
 
 return (
    <>
      {/* 查看设置的值 */}
      {JSON.stringify(props.documentChange.dataList)}
      <div onclick={click}>切换值</div>
    </>
  );
};

// documentChange 对应models命名空间
export default connect(({ documentChange }) => ({ documentChange }))(RequirementDetails);

到了这里,关于umi4使用状态管理dva的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react umi中使用svg线上图片不加载问题

    参考链接: https://www.jianshu.com/p/c927122a6e82 前言: 在react项目中,我们本地通过img标签的src使用svg图片是可以加载的,但是发布到线上图片加载不出来。 解决方案 方案一 使用场景:直接在当前页面引入svg图片 有一个 svgr 插件,是支持以 react component 的方式,引入 svg 图片的。

    2024年02月11日
    浏览(36)
  • React Dva项目创建Model,并演示数据管理与函数调用

    本文的话 我们讲一下定义Model 也就是Dva中redux的部分 我们打开一个刚创建的Dva项目 看到 src下的models 下 就是Model部分 这里 他给我们了一个案例 如果用 react-redux 管理 模块多了之后会看着比较乱 或 很麻烦 但是 大家会发现 在Model中 他将这些都放在一起了 只需要创建一个这样

    2024年02月15日
    浏览(37)
  • 【鸿蒙系统学习笔记】状态管理

    资料来自官网:文档中心 在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。 View

    2024年02月21日
    浏览(38)
  • Umi3笔记

    UMI文档 Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展(连锁反应)。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。 UMI 的主要用途包括: 路由管理:UMI 提供

    2024年02月09日
    浏览(33)
  • 《Flink学习笔记》——第八章 状态管理

    8.1 Flink中的状态 8.1.1 概述 在Flink中,算子任务可以分为无状态和有状态两种情况。 **无状态的算子:**每个事件不依赖其它数据,自己处理完就输出,也不需要依赖中间结果。例如:打印操作,每个数据只需要它本身就可以完成。 **有状态的算子:**事件需要依赖中间或者外

    2024年02月11日
    浏览(39)
  • HarmonyOS 应用开发学习笔记 状态管理概述

    移动端开发,最重要的一点就是数据的处理,并且正确的显示渲染UI。 变量在页面和组件、组件和组件之间有时候并不能实时共享,而有时候,又不需要太多的作用域(节省资源),作用就需要根据不同场景,设置不同状态的变量。 官方文档 在声明式UI编程框架中,UI是程序

    2024年02月03日
    浏览(44)
  • Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理

    Flutter笔记 Flutter的应用生命周期状态(lifecycleState)管理 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134127670 【介绍】: WidgetsBinding.instance 是Flutter中用于管理应用程序事件和生命周期的重要工具

    2024年02月06日
    浏览(42)
  • Vue-Element-Admin项目学习笔记(6)Vuex状态管理

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月09日
    浏览(45)
  • Android问题笔记 -如何实现代码控制自动旋转开关的变更以及当前状态

    专栏分享 点击跳转=Unity3D特效百例 点击跳转=案例项目实战源码 点击跳转=游戏脚本-辅助自动化 点击跳转=Android控件全解手册 点击跳转=Scratch编程案例 点击跳转=软考全系列 众所周知,人生是一个漫长的流程,不断 克服困难 ,不断反思前进的过程。在这个过程中会产生很多对

    2024年02月08日
    浏览(44)
  • umi框架的使用

    安装 npm i -g yrm 查看yarn镜像源 yrm ls 切换源 yrm use taobao 创建项目 yarn create @umijs/umi-app 安装依赖 yarn 启动项目 yarn start 路由组件还可以进行children进行子路由渲染 打个比方,现在有头部导航跟侧边是一致的我们只希望修改每个应用的内容这时候就用到子路由 路由权限配置,鉴

    2024年02月16日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包