{"id":286,"date":"2025-02-13T13:11:58","date_gmt":"2025-02-13T05:11:58","guid":{"rendered":"https:\/\/yichenghui.net\/?p=286"},"modified":"2025-02-13T13:11:58","modified_gmt":"2025-02-13T05:11:58","slug":"vue3%e5%a6%82%e4%bd%95%e5%9c%a8hook%e4%b8%ad%e6%89%a7%e8%a1%8c%e5%bc%82%e6%ad%a5%e5%87%bd%e6%95%b0%e5%b9%b6%e5%90%8c%e6%ad%a5%e8%bf%94%e5%9b%9e%e5%93%8d%e5%ba%94%e5%bc%8f%e6%95%b0%e6%8d%ae","status":"publish","type":"post","link":"https:\/\/yichenghui.net\/index.php\/2025\/02\/13\/vue3%e5%a6%82%e4%bd%95%e5%9c%a8hook%e4%b8%ad%e6%89%a7%e8%a1%8c%e5%bc%82%e6%ad%a5%e5%87%bd%e6%95%b0%e5%b9%b6%e5%90%8c%e6%ad%a5%e8%bf%94%e5%9b%9e%e5%93%8d%e5%ba%94%e5%bc%8f%e6%95%b0%e6%8d%ae\/","title":{"rendered":"Vue3\u5982\u4f55\u5728hook\u4e2d\u6267\u884c\u5f02\u6b65\u51fd\u6570\u5e76\u540c\u6b65\u8fd4\u56de\u54cd\u5e94\u5f0f\u6570\u636e"},"content":{"rendered":"<pre><code class=\"language-typescript\">import { ref, Ref } from &#039;vue&#039;;\n\nimport { listCountry } from &#039;@\/api\/mainData\/country&#039;;\n\ntype MainDataType = &#039;countryList&#039; | &#039;areaList&#039;;\n\ninterface Methods {\n  countryList: () =&gt; Promise&lt;void&gt;;\n  areaList: () =&gt; Promise&lt;void&gt;;\n}\n\nexport default (mainDataType: MainDataType): Ref&lt;any[]&gt; =&gt; {\n  const result = ref&lt;any[]&gt;([]);\n\n  if (!mainDataType) return result;\n  \/\/ \u83b7\u53d6\u56fd\u5bb6\u5217\u8868\n  const countryList = async () =&gt; {\n    const language = useStorage(&#039;language&#039;, &#039;en_US&#039;);\n    const languageField = language.value === &#039;en_US&#039; ? &#039;enName&#039; : &#039;zhName&#039;;\n    const res = await listCountry();\n    result.value = (res?.data ?? []).map((item: any) =&gt; ({\n      ...item,\n      key: item.id,\n      label: item[languageField]\n    }));\n  };\n\n  \/\/ \u83b7\u53d6\u533a\u57df\u5217\u8868\n  const areaList = async () =&gt; {};\n\n  const methods: Methods = {\n    countryList,\n    areaList\n  };\n\n  methods?.[mainDataType]?.();\n\n  return result;\n};\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>import { ref, Ref } from &#039;vue&#039;; import { list &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/yichenghui.net\/index.php\/2025\/02\/13\/vue3%e5%a6%82%e4%bd%95%e5%9c%a8hook%e4%b8%ad%e6%89%a7%e8%a1%8c%e5%bc%82%e6%ad%a5%e5%87%bd%e6%95%b0%e5%b9%b6%e5%90%8c%e6%ad%a5%e8%bf%94%e5%9b%9e%e5%93%8d%e5%ba%94%e5%bc%8f%e6%95%b0%e6%8d%ae\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201cVue3\u5982\u4f55\u5728hook\u4e2d\u6267\u884c\u5f02\u6b65\u51fd\u6570\u5e76\u540c\u6b65\u8fd4\u56de\u54cd\u5e94\u5f0f\u6570\u636e\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":0,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"wp:attachment":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}