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

隨選筆記文

Front-End

漸層色按鈕 Hover 效果

Vue

Nuxt.js 引用 Firebase SDK

WordPress

WordPress:Site Kit by Google 介紹及使用

Bot Telegram

Telegram Bot 學習筆記 – 4:命令列 Commands

WordPress

WordPress SEO 有幫助的 3 + 4 個外掛

Front-End

Day.js 計算最近7天、上週、上個月的日期

Vue

用 Vue CLI 3 + Vuetify 製作說明頁面

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

WordPress

Ubuntu 安裝 WordPress – 2:Webmin、Apache、MySQL、Hosts

PWA

PWA學習筆記-6:實際使用整體流程範例

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

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

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

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

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

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

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

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

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