Vue.js 與 axios 的應用說明(Composition API)

Vue.js 是一個流行的前端框架，它提供了許多便捷的功能來開發動態和互動性的網頁應用。axios 是一個基於 Promise 的 HTTP 客戶端，可以用於瀏覽器和 Node.js 環境中。在這篇文章中，我們將探討如何在 Vue.js 中使用 axios 來發送 HTTP 請求，並使用 Composition API 來組織代碼。

安裝 Vue.js 和 axios

要在 Vue.js 中使用 axios，首先需要安裝 Vue.js 和 axios 庫。你可以使用 npm 或 yarn 來安裝它們：

        
            npm install vue axios
            # 或
            yarn add vue axios
        
    

在 Vue.js 中使用 axios

一旦安裝了 axios，你就可以在 Vue 組件中輕鬆地使用它來發送 HTTP 請求。以下是一個簡單的範例，顯示了如何在 Vue 組件中使用 axios 來從 API 獲取數據：

        
            import { ref, onMounted } from 'vue';
            import axios from 'axios';

            export default {
                setup() {
                    const data = ref([]);

                    onMounted(async () => {
                        const response = await axios.get('https://api.example.com/data');
                        data.value = response.data;
                    });

                    return {
                        data,
                    };
                },
            };
        
    

使用 Composition API 組織代碼

在上面的範例中，我們使用了 Vue 3 中的 Composition API 來組織代碼。Composition API 允許我們根據功能而不是選項來組織組件代碼，這樣更容易重用代碼和結構化組件。

在 setup 函數中，我們使用 ref 函數來定義一個響應式的數據 data，並使用 onMounted 鉤子來在組件掛載後立即發送 HTTP 請求。一旦請求完成，我們將 response.data 賦值給 data.value，這樣組件就可以訪問並顯示這些數據了。

結論

在這篇文章中，我們學習了如何在 Vue.js 中使用 axios 來發送 HTTP 請求，並使用 Composition API 來組織代碼。通過組合這兩個強大的工具，我們可以輕鬆地處理數據請求和管理組件代碼。希望這篇文章能幫助你更好地理解 Vue.js 與 axios 的應用。