{"id":208723,"date":"2020-11-21T15:27:12","date_gmt":"2020-11-21T07:27:12","guid":{"rendered":"http:\/\/4563.org\/?p=208723"},"modified":"2020-11-21T15:27:12","modified_gmt":"2020-11-21T07:27:12","slug":"%e5%85%b3%e4%ba%8e-vue3-0-refreactive-%e4%b8%8e-typescript-%e7%9a%84%e9%97%ae%e9%a2%98%ef%bc%9f%e6%b1%82%e5%a4%a7%e4%bd%ac%e8%a7%a3%e7%ad%94%e7%96%91%e6%83%91","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=208723","title":{"rendered":"\u5173\u4e8e vue3.0 ref,reactive \u4e0e typescript \u7684\u95ee\u9898\uff1f\u6c42\u5927\u4f6c\u89e3\u7b54\u7591\u60d1"},"content":{"rendered":"
\n
\n
\n

\u5173\u4e8e vue3.0 ref,reactive \u4e0e typescript \u7684\u95ee\u9898\uff1f\u6c42\u5927\u4f6c\u89e3\u7b54\u7591\u60d1 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : zmlq7 <\/span> <\/i> 4<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u65b0\u624b\u624d\u5f00\u59cb\u5199 vue3.0 \u3002 \u7740\u624b\u5728\u7f16\u4e00\u4e2a\u81ea\u5df1\u7528\u7684 hook \u6587\u4ef6\uff0c \u53ef\u662f\u5728 typescript \u5b9a\u4e49\u4e0a\u51fa\u4e86\u95ee\u9898\uff0c \u62dc\u6258\u6709\u5927\u4f6c\u80fd\u89e3\u7b54\u4e00\u4e0b~<\/p>\n

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) \/\/ \u5f53\u524d\u9875\u6570   const pageSize = ref(10) \/\/ \u5355\u9875\u6761\u6570   const pageCount = ref(0) \/\/ \u603b\u9875\u6570   const dataCount = ref(10) \/\/ \u603b\u6761\u6570   const getListLoading = ref(false) \/\/ \u8bf7\u6c42\u52a0\u8f7d\u8868\u793a   let localRequestData = reactive<Partial<REQUEST_DATA>>(requestData) \/\/ \u8bf7\u6c42\u7684\u5176\u4ed6\u53c2\u6570   const dataList = reactive<LIST_ITEM_PROPS[]>([])   \/\/ \u83b7\u53d6\u5217\u8868   const getList = async () => {     try {       getListLoading.value = true       const requestData: REQUEST_DATA_ALL<REQUEST_DATA> = { pageIndex: pageIndex.value, pageSize: pageSize.value, ...toRefs(localRequestData as object) } \/\/ \u8fd9\u91cc\u8fd9\u4e2a \u5c55\u5f00\u7684\u5408\u5e76 \u6211\u4e0d\u4f1a       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)     }   }    \/\/ \u8bbe\u7f6e\u5355\u9875\u6761\u6570   const setPageSize = (newPageSize: number) => {     pageSize.value = newPageSize   }   watch(pageSize, (val, oldVal) => {     setPageIndex(1)   })    \/\/ \u8bbe\u7f6e\u5f53\u524d\u9875\u6570   const setPageIndex = (newPageIndex: number) => {     pageIndex.value = newPageIndex   }   watch(pageIndex, (_val, _oldVal) => {     getList()   })    \/\/ \u8bbe\u7f6e\u8bf7\u6c42\u53c2\u6570   const setRequestData = (requestData: Partial<REQUEST_DATA>) => {     Object.keys(requestData).forEach(item => {       localRequestData[item] = requestData[item as keyof Partial<REQUEST_DATA>]     })   }    \/\/ \u521d\u59cb\u5316 use   const initUse = () => {     getList()   }    onMounted(() => initUse())   \/\/ watch   return {     pageIndex,     pageSize,     pageCount,     dataCount,     getListLoading,     dataList: readonly(dataList),     setPageSize,     setPageIndex,     setRequestData   } }  export default useGetList;  <\/code><\/pre>\n
\u95ee\u9898 1\uff1a const requestData: REQUEST_DATA_ALL<REQUEST_DATA> = { pageIndex: pageIndex.value, pageSize: pageSize.value, ...toRefs(localRequestData as object) }<\/code> \u6211\u60f3\u628a\u5b58\u50a8\u8d77\u6765\u7684localRequestData<\/code>\u548c\u56fa\u5b9a\u4f1a\u5b58\u5728\u4e8e\u8bf7\u6c42\u53c2\u6570\u7684pageIndex<\/code>\u548cpageSize<\/code>\u4fdd\u5b58\u5728\u4e00\u8d77,\u53ef\u662flocalRequestData<\/code>\u7684\u7c7b\u578b\u63a8\u5bfc\u662fUnwrapNestedRefs<Partial<REQUEST_DATA>><\/code> ,\u8fd9\u91cc\u6211\u5c31\u6df7\u4e0d\u6765\u4e86\u3002\u3002\u3002\uff0c\u7528 as object<\/code>\u6df7\u8fc7\u53bb\u4e86\u3002<\/p>\n
\u95ee\u9898 2\uff1asetRequestData<\/code>\u51fd\u6570\uff0c\u8fd9\u91cc\u6211\u53ea\u662f\u6709\u4e2a\u7591\u95ee\u6240\u4ee5\u7528\u8fd9\u79cd\u65b9\u5f0f\u5199\uff0c\u8fd9\u79cd\u6211\u60f3\u8981\u6539reactive<\/code>\u5b9a\u4e49\u7684\u90e8\u5206\u5b57\u6bb5\uff0c\u8981\u600e\u4e48\u5199\u5440\u3002 \"\u5173\u4e8e \"\u5173\u4e8e<\/p>\n
\u53ef\u80fd\u6211\u53ea\u6709\u4e00\u4e2a\u95ee\u9898\u5c31\u662f\uff0c\u5f53\u6211\u5b9a\u4e49\u4e00\u4e2areactive<\/code>\u4f20\u5165\u7684\u662f\u7c7b\u578b\u53d8\u91cf\u800c\u4e0d\u662f\u5177\u4f53\u7c7b\u578b\u7684\u53d8\u91cf\u65f6\uff0c\u63a5\u4e0b\u6765\u8fd9\u4e2a\u53d8\u91cf\u7684\u7c7b\u578b\u662f UnwrapNestedRefs<T><\/code> \uff0c\u6211\u8981\u600e\u4e48\u5728\u540e\u9762\u7684\u4ee3\u7801\u4e2d\u6b63\u786e\u7684\u53bb\u5c55\u5f00\uff0c\u5408\u5e76\u3002<\/p>\n<\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (0<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n","protected":false},"excerpt":{"rendered":"
    \u5173\u4e8e vue3.0 ref,rea…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/208723"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=208723"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/208723\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=208723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=208723"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=208723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}