基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用

随着前端框架的不断发展，Vue 3引入的组合式API（Composition API）为开发者提供了一种更灵活、更强大的逻辑复用方式。组合函数（Composition Function）可以将通用逻辑抽取成独立模块，便于在不同组件间共享和复用。本文将基于nbsaas-boot项目，详细介绍如何通过Vue 3的组合函数实现分页、搜索与排序功能，展示组合函数在实际项目中的应用价值。

1. 组合函数概述

Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。

在大型项目中，像nbsaas-boot这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。

2. 实践代码——封装分页、搜索与排序逻辑

在nbsaas-boot项目中，通过组合函数usePageData，我们可以将分页、搜索、排序等逻辑封装起来，方便在多个页面中复用。以下是完整的组合函数实现：

import {onMounted, ref} from "vue";
import http from "@/utils/request";

export function usePageData(functionMethod, searchObject) {
    let pageData = ref({
        size: 10,
        total: 0,
        totalPage: 0,
        data: []
    })

    let loading = ref(false)

    const searchList = async () => {
        loading.value = true;
        let data = {
            model: functionMethod,
            filters: searchObject,
            page: searchObject.no,
            size: searchObject.size
        };

        let res = await http.post(`/data/search`, data);
        if (res.code === 200) {
            pageData.value = res;
        }
        loading.value = false;
    }

    const sizeChange = async (event) => {
        searchObject.size = event;
        await searchList();
    }

    const pageChange = async (index) => {
        searchObject.no = index;
        await searchList();
    }

    const search = async () => {
        searchObject.no = 1;
        await searchList();
    }

    const changeTableSort = async (column) => {
        searchObject.sortField = column.prop;
        searchObject.sortMethod = column.order === "descending" ? "desc" : "asc";
        await searchList();
    }

    onMounted(async () => {
        await search();
    })

    return {pageData, searchList, sizeChange, pageChange, search, changeTableSort, loading}
}

3. 组合函数的实际使用

在项目中，通过组合函数，我们可以在不同的组件中轻松实现分页、搜索、排序等功能。以下是组合函数usePageData的具体使用方式：

import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import nbSelect from "@/components/nbSelect.vue";
import {useData} from "@/utils/useData";
import {usePageData} from "@/uses/usePageData";
import {onMounted, ref} from "vue";
import http from "@/utils/request";

const selectDate = ref({});

const searchStore = defineStore('orderPay', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 30,
        sortField: "id",
        sortMethod: "desc",
        shop: null,
        store: null,
        customer: null,
        orderType: "4,6",
        payState: "1",
        orderState: null,
        customerName: null,
        customerPhone: null,
        date1:null,
        date2:null
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.shop = null;
  searchObject.store = null;
  searchObject.customer = null;
  searchObject.payState = null;
  searchObject.orderState = null;
  searchObject.customerName = null;
  searchObject.customerPhone = null;
  searchObject.date1 = null;
  searchObject.date2 = null;
  selectDate.value=null;
}
const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePageData("page_order", searchObject);

这一行代码解构了组合函数返回的对象，获取到分页数据（pageData）、分页大小变化（sizeChange）、页码变化（pageChange）、搜索（search）、排序变更（changeTableSort）以及加载状态（loading）等方法和数据。

4. 组合函数的优势与应用场景

4.1 代码复用

通过将逻辑封装在组合函数中，开发者可以轻松复用该函数，不论是订单管理、用户管理，还是其他数据列表管理场景，只需传递不同的查询方法和查询对象即可复用该逻辑。例如：

• 在订单管理页面使用：

const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePageData("page_order", searchObject);

在用户管理页面使用：

const {pageData, sizeChange, pageChange, search, changeTableSort, loading} = usePageData("page_user", searchObject);

这种复用方式减少了代码冗余，避免了重复编写分页、搜索和排序逻辑。

4.2 提高代码可维护性

在复杂的业务逻辑中，若将分页、搜索、排序等逻辑散布于组件内部，代码会变得复杂且难以维护。而通过组合函数，可以将逻辑与UI分离，使得代码结构更加清晰，并且能够轻松进行修改和扩展。

例如，若需要修改分页逻辑或添加新的筛选条件，只需在usePageData函数中调整逻辑，其他所有使用该函数的组件都能够受益于此修改。

4.3 响应式数据管理

组合函数中使用ref和reactive来管理响应式数据，使得数据变化能够自动反映在组件中。例如，pageData和loading都通过ref定义为响应式数据，当分页结果或加载状态发生变化时，页面将自动更新。

let pageData = ref({
    size: 10,
    total: 0,
    totalPage: 0,
    data: []
});
let loading = ref(false);

通过Vue 3的响应式系统，开发者无需手动更新UI，极大简化了状态管理的复杂性。

5. 组合函数的其他操作——分页、搜索与排序

5.1 分页操作

函数sizeChange和pageChange分别处理每页显示条数和当前页码的变更，并在用户进行这些操作时触发重新加载数据。

const sizeChange = async (event) => {
    searchObject.size = event;
    await searchList();
}

const pageChange = async (index) => {
    searchObject.no = index;
    await searchList();
}

5.2 搜索操作

通过search函数，用户可以触发新的搜索请求，且在搜索时自动重置当前页码为第一页。

const search = async () => {
    searchObject.no = 1;
    await searchList();
}

5.3 排序操作

changeTableSort函数处理用户点击表格列头时的排序逻辑，并根据排序顺序（升序或降序）调整searchObject中的sortField和sortMethod，然后重新加载数据。

const changeTableSort = async (column) => {
    searchObject.sortField = column.prop;
    searchObject.sortMethod = column.order === "descending" ? "desc" : "asc";
    await searchList();
}

6. 结论

通过在nbsaas-boot项目中使用Vue 3的组合函数，开发者能够将分页、搜索、排序等逻辑高度封装，并在多个组件中复用。这种做法不仅提高了代码的复用性，还提升了项目的可维护性和扩展性。Vue 3的组合式API为复杂前端应用带来了更高的灵活性和结构化的逻辑管理，未来在更多的项目中，组合函数将成为主流的开发模式。