基于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为复杂前端应用带来了更高的灵活性和结构化的逻辑管理，未来在更多的项目中，组合函数将成为主流的开发模式。