随着Vue 3的引入,组合式API(Composition API)带来了更灵活的代码组织方式,组合函数作为其核心部分,能够显著提升代码的可维护性、复用性和模块化。在这篇文章中,我们将通过一个具体的表格管理和分页功能的示例,详细介绍如何使用组合函数来构建更加高效和清晰的Vue 3应用。
1. 组合函数是什么?
组合函数是指将某一业务逻辑或状态封装成独立的函数,供多个组件复用。它能够让开发者更好地组织复杂逻辑,并提高代码的复用性。组合函数可以通过Vue 3的setup
函数轻松调用和组合。
2. 示例项目场景
我们以一个典型的门店管理系统为例,前端页面需要具备以下功能:
- 表格展示门店列表,支持分页和排序。
- 搜索功能,按联系电话和门店名称进行筛选。
- 支持新增、编辑、查看详情和删除操作。
3. 组合函数的定义
在这个项目中,我们定义了几个核心的组合函数,分别用于不同的功能模块:分页、删除操作和视图管理。
- usePage:用于处理分页、排序、搜索等表格操作。
- useDelete:处理删除确认框以及执行删除操作。
- useView:用于显示详情或编辑界面。
3.1 usePage
的实现
usePage
封装了分页、表格排序和搜索功能。通过这种方式,我们可以在多个页面中复用该逻辑:
import {onMounted, ref} from "vue";
import http from "@/utils/request";
export function usePage(functionMethod, searchObject) {
let pageData = ref({})
let loading = ref(false)
const searchList = async () => {
loading.value = true;
let res = await http.post(functionMethod, searchObject);
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;
if ("descending" === column.order) {
searchObject.sortMethod = "desc";
} else if ("ascending" === column.order) {
searchObject.sortMethod = "asc";
} else {
searchObject.sortMethod = "";
}
await searchList();
}
onMounted(async () => {
await search();
})
return {pageData, searchList, sizeChange, pageChange, search, changeTableSort,loading}
}
在这里,我们通过封装请求逻辑、表格分页、排序等操作,将这些逻辑从具体的组件中抽离出来,这样的组合函数在多个表格场景中都可以直接复用。
3.2 useDelete
的实现
useDelete
封装了删除操作,主要处理确认删除弹窗的逻辑和实际的删除操作:
import {onMounted, ref} from "vue";
import http from "@/utils/request";
import { ElMessage } from 'element-plus'
export function useDelete(functionMethod,getSearchList) {
let selectId = ref({})
let dialogVisible = ref(false)
const deleteData=(row)=> {
selectId.value = row.id;
dialogVisible.value = true;
}
const handleDelete=async () => {
dialogVisible.value = false;
if (selectId.value) {
let params = {};
params.id = selectId.value;
let res = await http.post(functionMethod, params);
if (res.code === 200) {
ElMessage({
message: '删除成功',
type: 'success',
})
getSearchList();
} else {
ElMessage.error(res.msg)
}
}
}
return {dialogVisible, deleteData,handleDelete}
}
useDelete
将删除弹窗与操作的逻辑集中在一起,当用户确认删除时,执行handleDelete
并刷新列表,这一功能同样可以在多个模块中复用。
3.3 useView
的实现
useView
封装了查看详情和编辑的逻辑:
import {useRouter} from "vue-router";
export function useView(functionMethod,getSearchList) {
const router = useRouter();
const showView=async (row) => {
let data = {};
data.id = row.id;
await router.push({
path: 'view',
query: data
});
}
const addView=async (row) => {
await router.push({
path: 'add'
});
}
const editView=async (row) => {
let data = {};
data.id = row.id;
await router.push({
path: 'update',
query: data
});
}
const goBack=()=> {
router.go(-1);
}
return {showView,addView,editView,goBack}
}
useView
可以用于展示、新增、编辑等操作逻辑,通过统一的接口来调用这些功能,使代码更简洁易维护。
4. 如何在组件中使用组合函数?
在组件中,我们可以非常简单地调用这些组合函数并绑定到具体的UI操作上。例如,在setup
中引入并使用分页、删除和视图管理逻辑:
import { usePage } from "@/utils/usePage";
import { useDelete } from "@/utils/useDelete";
import { useView } from "@/utils/useView";
const searchStore = defineStore('storeStore', {
state: () => ({
searchObject: {
no: 1,
size: 10,
phone: null,
name: null,
sortField: "id",
sortMethod: "desc"
}
})
});
const { searchObject } = searchStore();
const { pageData, sizeChange, pageChange, search, changeTableSort, loading } = usePage("/store/search", searchObject);
const { dialogVisible, deleteData, handleDelete } = useDelete("/store/delete", search);
const { showView, addView, editView } = useView();
在模板中使用这些方法来绑定具体的事件,例如:
<el-button @click="search">搜索</el-button>
<el-table :data="pageData.data" @sort-change="changeTableSort">
<!-- 表格内容 -->
</el-table>
<el-pagination @size-change="sizeChange" @current-change="pageChange"></el-pagination>
5. 组合函数的优势
-
高度复用:组合函数将重复逻辑封装到可复用的函数中,减少了重复代码的出现。
-
逻辑分离:通过组合函数,我们可以将复杂的逻辑拆分到独立的模块中,避免组件过于臃肿。
-
提高可测试性:每个组合函数都是独立的逻辑单元,因此可以更容易地进行单元测试。
-
提升维护性:因为逻辑清晰分离,后期对业务逻辑的修改不会影响其他功能模块,提升了代码的可维护性。
6. 结论
通过合理使用Vue 3的组合函数,我们可以在复杂的前端项目中轻松组织代码,提升开发效率和代码质量。在这个门店管理系统示例中,组合函数帮助我们将分页、删除、视图管理等功能逻辑抽象出来,提升了组件的灵活性和复用性。这种方法在开发大型应用时尤为有用,有助于保持代码的清晰和模块化。
项目代码 nbsaas-mall2-shop: nbsaas-mall2商家端
标签:逻辑,Vue,const,函数,模块化,await,复用,searchObject,async From: https://blog.csdn.net/u010362741/article/details/142311849