深入解析Vue 3组合函数：提高代码复用性和模块化的最佳实践

nbsaas-boot

已于 2024-09-17 10:22:05 修改

阅读量231

点赞数 7

文章标签： vue.js javascript 前端

于 2024-09-17 10:20:39 首次发布

本文链接：https://blog.csdn.net/u010362741/article/details/142311849

版权

随着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>