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

Vue.js 3 Composition API 基本學習筆記-2:fetch data、export / import
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
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言