umi4使用状态管理dva

1.在config.js中配置dva

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

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

models/documentChange.ts

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);