526互联

公共Hooks封装之请求参数useQueryParams

发布时间 2024-01-04 14:45:35作者: 柯基与佩奇

项目环境

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 合并参数等～