新冠疫情全球范圍內已持續數月之久，各式各樣處理數據的 API 應運而生。在這篇文章中，我們將探索如何使用 Vue 框架來接入疫情 API，以了解有關病毒爆發的最新信息。

首先，我們需要找到一個公開可用的疫情數據 API。有許多免費的 API 可供使用，大多數都需要開發人員注冊元數據，并確保他們的應用符合服務條款和條件。

fetch('https://covid-api.mmediagroup.fr/v1/cases')
.then((response) =>response.json())
.then((data) =>console.log(data));

上述代碼是一個使用 fetch 函數調用 API 并打印 JSON 數據的示例。我們將在后續的段落中介紹如何在 Vue 中使用 fetch 函數。

在 Vue 中使用 fetch 很容易，因為它是基于 JavaScript 的標準方法。我們只需要調用 fetch 函數并傳遞 API 端點 URL，然后使用 .then() 調用 JSON 數據處理函數。

data() {
return {
covidData: null,
};
},
created() {
fetch("https://covid-api.mmediagroup.fr/v1/cases")
.then((response) =>response.json())
.then((data) =>(this.covidData = data));
},

請注意，我們將 API 數據存儲在 Vue 組件中的 covidData 對象中。

我們可以在 Vue 模板中使用 covidData 對象來呈現 API 數據。以下是一個簡單的示例模板。

{{ covidData.Global.All.Deaths }}
{{ covidData.Global.All.Confirmed }}
{{ covidData.Global.All.Recovered }}

此示例將顯示全球疫情數據中的死亡、確診和康復情況。

我們還可以使用計算屬性來計算國家的確診情況，然后將其顯示在模板中。以下是一個計算屬性的示例。

computed: {
countries() {
if (this.covidData) {
return Object.keys(this.covidData).filter((country) =>{
return country !== "Global";
});
}
},
},

此計算屬性將返回已確認病例的國家，并將其作為列表呈現在模板中。

在 Vue 中使用疫情數據 API 是一項簡單的任務。我們只需要使用 fetch 函數調用 API，然后將數據存儲在 Vue 組件中，并在模板中使用這些數據來呈現相關信息。如果您正在開發關于疫情的應用程序，這些代碼將為您省去大量的工作量。