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