使用vue3的hooks封装一个获取表格的方法

起初发现，我们业务中获取表格的方法都是一样的，不如抽取出来，封装一个，不然每个页面都是一样的逻辑。

1.创建一个公共的js文件

//如果自己的组件中没有全局引入的话，需要引入以下的代码：
import {reactive, toRefs,} from 'vue'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus'

//一般命名前缀是使用use
export const useTable = (apiUrl:any,searchParmas:any)=>{
    // 首先定义存放数据的变量
    const state  = reactive({
        loading: false, //加载状态
        tableData:[], //存放表格数据
        listQuery:reactive({ ...searchParmas, page: 1, limit: 20 }),
    })

    // 定义获取表格数据的方法
    const loadList = ()=>{
        state.loading = true
        const params ={
            ...state.listQuery,
            ...searchParmas
        }
        try {
            state.tableData = await apiUrl(params)
        } finally{
            state.loading = false
            state.tableData = []
        }
    }

    //分页切换方法
    const pageChange = (val:number)=>{
        state.listQuery.page = val
        loadList()
    }

    //分页size切换方法
    const sizeChange = (val:number)=>{
        state.listQuery.limit = val
        loadList()
    }
    
    // 定义搜索方法，使用防抖lodash
    const searchData = debounce((loadList:any) => {
        state.listQuery.page = 1
        loadList();
      }, 500)

    //重置搜索条件
    const resetSearch = ()=>{
        state.listQuery = reactive({ ...searchParmas, page: 1, limit: 20 })
        loadList()
    }

      return {
        ...toRefs(state),
        loadList,
        pageChange,
        sizeChange,
        searchData,
        resetSearch
      };
}

2.然后在对应的页面引入刚刚封装的文件

import { useTable } from '@/hooks/useTable';
// 引入接口Api
import { getCusList } from '@/api/modules/customer'

const searchParam = reactive({ keyword: '' })
// 使用自定义table hooks
const {
  loadList, pageChange, sizeChange, searchData, resetSearch, loading,tableData,listQuery
} = useTable(getCusList, searchParam);
onMounted(()=>{
    loadList()

})