公共Hooks封装之请求参数useQueryParams
tip 写在前面 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks. 本篇文章为
useQueryParams.js
基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人
项目环境
Vue3.x + Ant Design Vue3.x + Vite3.x
此篇内容讲解的是关于公共Hooks封装之表格数据useTableData中暴露出来与queryParams的一些方法,而进行封装的Hooks,其目的在于减少冗余重复代码的书写。
封装分解:参数定义
const defaultParams = clone(params); // 作为Hooks被使用后,克隆页面内声明常见的请求参数,可理解为静态参数
const queryParams = ref({ ...defaultParams });
封装分解:合并参数
const mergeParams = params => {
queryParams.value = Object.assign({}, queryParams.value, params);
};
合并参数的使用场景则是页面内请求数据的一些动态参数,例如子组件(弹窗Modal、抽屉Drawer)等被打开同时需要请求数据(明细Table、编辑信息Info),往往需要对应唯一Key来调用接口
合并参数--范例
代码范例仅解释合并参数mergeParams用法,且只有关键用法
父组件代码:
<a-table>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<span class="cl-link cursor-pointer" @click="showDetail(record.ID)">明细</span>
</template>
</template>
</a-table>
<detail :only-key="curKey" v-model:visible="drawerVisible" />
<script setup>
const showDetail = Id => {
drawerVisible.value = true;
curKey.value = Id
}
</script>
子组件代码:
<script setup>
watch(
() => props.visible,
newVal => {
if (newVal) {
mergeParams({
onlyKey: props.onlyKey,
});
queryParams.value.pageIndex = 1;
getTableData();
}
},
);
</script>
useQueryParams.js完整代码
import { ref } from 'vue';
import { clone } from 'lodash-es';
export function useQueryParams(params) {
const defaultParams = clone(params);
const queryParams = ref({ ...defaultParams });
const resetParams = () => {
queryParams.value = { ...defaultParams };
};
const mergeParams = params => {
queryParams.value = Object.assign({}, queryParams.value, params);
};
return {
queryParams,
resetParams,
mergeParams,
};
}
实际使用示例
// page.vue
import { useQueryParams, useTableData } from '@/hooks';
const { queryParams, resetParams, mergeParams } = useQueryParams({
pageIndex: 1,
pageSize: 10,
name: '',
status: 1,
keyId: null,
});
const { tableData, loading, getTableData, getPaginationOptions, onTableChange } = useTableData(
departList,
queryParams
)
const getList = () => {
queryParams.value.keyId = props.id;
mergeParams({
[state.searchType]: state.searchValue,
});
getTableData();
};
const onSearch = () => {
queryParams.value.pageIndex = 1;
getTableData();
};
watch(
() => props.id,
() => {
resetParams();
getList();
},
);
结合useTableData 和 useQueryParams 灵活使用,达到最普通的列表页面仅引入即可,需要修改请求参数或二次处理表格数据的情况,使用mergeParams合并参数等~
至此公共Hooks封装系列暂时结束,系列文章仅以个人项目总结思考书写的内容,仅供参考
系列文章
- 公共Hooks封装之文件下载useDownloadFile
- 公共Hooks封装之报表导出useExportExcel
- 公共Hooks封装之表格数据useTableData
- 公共Hooks封装之请求参数useQueryParams
写在最后
- 文章内容为个人基于实际项目并脱敏处理的原创内容,如需要转载请备注原文链接~
- 如果看完文章对于你有帮助,就来一键三连吧~更欢迎您在评论区进行指点
转载自:https://juejin.cn/post/7174278400100532254