vue3.0 ref,reactive与typescript的一些问题?

发布于 2022-09-12 13:28:11 字数 3217 浏览 12 评论 0

新手才开始写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和固定会存在于请求参数的pageIndexpageSize保存在一起,可是localRequestData的类型推导是UnwrapNestedRefs<Partial<REQUEST_DATA>> ,这里我就混不来了。。。,用 as object混过去了。

问题2:setRequestData函数,这里我只是有个疑问所以用这种方式写,这种我想要改reactive定义的部分字段,要怎么写呀。
image.png

可能我只有一个问题就是,当我定义一个reactive传入的是类型变量而不是具体类型的变量时,接下来这个变量的类型是 UnwrapNestedRefs<T> ,我要怎么在后面的代码中正确的去展开,合并。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文