本篇要解決的問題
在上一篇學會了基本的 Composition API 的使用,包含:Ref、Props、watch、生命週期,接著這一篇是要寫最重要的,API 取回資料後更新,以及能讓 JS 重複使用的 import、export。
這篇同樣是整理 The Net Ninja 的影片。
Fetch Data 取資料
取資料的部份,他示範了一個很優的寫法,就是加上 try catch
。
這邊資料來源直接用 JSONPlaceholder:
export、import
我們把上一段取資料的 JS Code 另存成 getData.js
的檔案,並把原本寫在 setup()
的東西包在 export
裡。
getData.js
接著在 HelloWorld.vue 的檔案進行 import
:
HelloWorld.vue
export、import + props
export
、import
時,也可以帶入 props
,這樣我們就可以用 props
來做調用不同 API 的動作。
getData.js 先改成如下:
getData.js
引用 HelloWorld 的 HTML 寫以下:
<HelloWorld uri="https://jsonplaceholder.typicode.com/posts" />
上面那行就是我們帶入了一個名為 uri
的 props
,給的值是另一個 API 的 URL。
最後,在 HelloWorld.vue 加入 props
,如下:
HelloWorld.vue
有了 export
、import
,又可以用 props
給不同的值,對開發真的是很方便,這樣只需要寫一次調用某 API 的檔,以後就是 import
並執行就可以了。
Summary
Article Name
Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import
Description
本篇大綱:本篇要解決的問題。Fetch Data 取資料。export、import。export、import + props。在上一篇學會了基本的 Composition API 的使用,接著這一篇是要寫最重要的,API 取回資料後更新,以及 import、export。
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg