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);
文章来源:https://www.toymoban.com/news/detail-523793.html
到了这里,关于umi4使用状态管理dva的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!