新手才开始写 vue3.0 。 着手在编一个自己用的 hook 文件, 可是在 typescript 定义上出了问题, 拜托有大佬能解答一下~
import { ref, reactive, watch, onMounted, readonly, toRefs } from 'vue';
import { IRes } from '@/utils/axios';
export type REQUEST_DATA_ALL<T extends object> = {
pageSize: number,
pageIndex: number,
} | T
function useGetList<LIST_ITEM_PROPS, REQUEST_DATA extends object>(request: (data: REQUEST_DATA_ALL<REQUEST_DATA>) => Promise<IRes<{
list: LIST_ITEM_PROPS[],
count: number,
pageCount: number
}>>, requestData: Partial<REQUEST_DATA>, errorHandle?: (res: IRes<unknown>) => void): {
} {
const pageIndex = ref(1) // 当前页数
const pageSize = ref(10) // 单页条数
const pageCount = ref(0) // 总页数
const dataCount = ref(10) // 总条数
const getListLoading = ref(false) // 请求加载表示
let localRequestData = reactive<Partial<REQUEST_DATA>>(requestData) // 请求的其他参数
const dataList = reactive<LIST_ITEM_PROPS[]>([])
// 获取列表
const getList = async () => {
try {
getListLoading.value = true
const requestData: REQUEST_DATA_ALL<REQUEST_DATA> = { pageIndex: pageIndex.value, pageSize: pageSize.value, ...toRefs(localRequestData as object) } // 这里这个 展开的合并 我不会
console.log(requestData)
const res = await request(requestData)
dataList.concat(reactive(res.data.list))
pageCount.value = res.data.pageCount
dataCount.value = res.data.count
getListLoading.value = false
} catch (e) {
console.log(e)
errorHandle && errorHandle(e)
}
}
// 设置单页条数
const setPageSize = (newPageSize: number) => {
pageSize.value = newPageSize
}
watch(pageSize, (val, oldVal) => {
setPageIndex(1)
})
// 设置当前页数
const setPageIndex = (newPageIndex: number) => {
pageIndex.value = newPageIndex
}
watch(pageIndex, (_val, _oldVal) => {
getList()
})
// 设置请求参数
const setRequestData = (requestData: Partial<REQUEST_DATA>) => {
Object.keys(requestData).forEach(item => {
localRequestData[item] = requestData[item as keyof Partial<REQUEST_DATA>]
})
}
// 初始化 use
const initUse = () => {
getList()
}
onMounted(() => initUse())
// watch
return {
pageIndex,
pageSize,
pageCount,
dataCount,
getListLoading,
dataList: readonly(dataList),
setPageSize,
setPageIndex,
setRequestData
}
}
export default useGetList;
问题 1: const requestData: REQUEST_DATA_ALL<REQUEST_DATA> = { pageIndex: pageIndex.value, pageSize: pageSize.value, ...toRefs(localRequestData as object) }
我想把存储起来的localRequestData
和固定会存在于请求参数的pageIndex
和pageSize
保存在一起,可是localRequestData
的类型推导是UnwrapNestedRefs<Partial<REQUEST_DATA>>
,这里我就混不来了。。。,用 as object
混过去了。
问题 2:setRequestData
函数,这里我只是有个疑问所以用这种方式写,这种我想要改reactive
定义的部分字段,要怎么写呀。
可能我只有一个问题就是,当我定义一个reactive
传入的是类型变量而不是具体类型的变量时,接下来这个变量的类型是 UnwrapNestedRefs<T>
,我要怎么在后面的代码中正确的去展开,合并。