Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import

/

本篇要解決的問題

在上一篇學會了基本的 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

exportimport 時,也可以帶入 props,這樣我們就可以用 props 來做調用不同 API 的動作。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

getData.js 先改成如下:

getData.js

引用 HelloWorld 的 HTML 寫以下:

<HelloWorld uri="https://jsonplaceholder.typicode.com/posts" />

上面那行就是我們帶入了一個名為 uriprops,給的值是另一個 API 的 URL。

最後,在 HelloWorld.vue 加入 props,如下:

HelloWorld.vue


有了 exportimport,又可以用 props 給不同的值,對開發真的是很方便,這樣只需要寫一次調用某 API 的檔,以後就是 import 並執行就可以了。

Summary
Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import
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
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

Nuxt.js 一些好用的設定

Front-End

MacBook 用隨身碟執行 Windows 10:Windows To Go、WinToUSB

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

IntersectionObserver:下篇 – 實際應用 lazyload、進場效果、無限捲動

Front-End

Netlify + GitLab 建一個免費靜態網站

Front-End

用純 CSS 寫的網頁預覽效果

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Front-End

Instagram oEmbed 嵌入 IG 貼文

Google Others

用 GCP 建立 Cloud Functions

WordPress

搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言