深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用

Amd794發表於2024-06-23
UX架構API

title: 深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用
date: 2024/6/23
updated: 2024/6/23
author: cmdragon

excerpt:
摘要：“本文深入探討了Nuxt3 Composables，重點介紹了其目錄架構和內建API的高效應用。透過學習本文，讀者將能夠更好地理解和利用Nuxt3 Composables來構建高效的應用程式。”

categories:

  • 前端開發

tags:

  • Nuxt3
  • Composables
  • 目錄架構
  • 內建API
  • 高效應用程式
  • 構建應用
  • 學習

image

image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

Nuxt3 Composables

1.1 Composables 概述

Composables 是 Vue 3 中的一種新特性，它允許在元件之間共享可複用的邏輯和計算。Composables 是輕量級的，它們不是真正的元件，而是獨立的
JavaScript 檔案，通常位於~/composables目錄下。它們可以包含資料、方法、計算屬性等，可以被任何元件匯入並使用，從而幫助組織程式碼，減少重複，並提高程式碼的可複用性。

1.2 安裝與配置

在 Nuxt.js 3 中，由於 Nuxt 本身已經整合了 Vue 3 的 Composables，所以你不需要額外安裝。只需在專案中建立一個~/composables
資料夾，然後在其中建立.js或.ts檔案來定義你的 Composables。

Nuxt 提供了自動匯入和使用 Composables 的支援。在需要使用 Composables 的元件中，只需使用import語句匯入，例如：

// components/MyComponent.vue
import { useMyFunction } from "~/composables/myFunction.js"

export default {
  setup() {
    const result = useMyFunction();
    // ...
  }
}

1.3 使用 Composables 的基本步驟

  1. 建立 Composables：在~/composables資料夾中，建立一個檔案（如myFunction.js），定義你的函式或計算邏輯。
  2. 匯入 Composables：在需要使用的地方，如元件的setup函式中，匯入需要的 Composables。
  3. 使用 Composables：在匯入後，可以直接使用 Composables 中的變數、方法或計算屬性。
  4. 更新和響應式：由於 Vue 3 的響應式系統，當你在 Composables 中修改資料時，依賴於這些資料的元件會自動更新。

1.4 Composables 與 Vue 3 的響應式系統

Composables 中的資料預設是響應式的，因為它們是 Vue 3 元件的一部分。當你在 Composables 中定義一個資料物件或計算屬性，並在元件中使用它，Vue
的變更檢測系統會在資料變化時自動更新元件。例如：

// myFunction.js
export const myData = ref(0);

export function increment() {
  myData.value++;
}

在元件中：

import { myData, increment } from "~/composables/myFunction.js"

setup() {
  onMounted(() => increment()); // 初始化
  watch(myData, () => console.log('Data updated!')); // 監聽資料變化
}

當myData的值改變時，元件中的watch會觸發。這就是 Composables 和 Vue 3 響應式系統協同工作的基本方式。

核心 Composables

2.1 useFetch

useFetch是 Nuxt 3 提供的一個核心 Composables，用於簡化從 API 獲取資料的過程。它封裝了非同步資料獲取的邏輯，使得在元件中獲取資料變得簡單和直觀。

基本用法

  1. 匯入 useFetch：在元件中匯入useFetch。
  2. 使用 useFetch：在元件的setup函式中呼叫useFetch，並傳入一個 URL 或一個返回 URL 的函式。

示例程式碼如下：

// components/MyComponent.vue
import { useFetch } from '#app'; // 使用 Nuxt 3 的內建 useFetch

export default {
  setup() {
    const { data, pending, error } = useFetch('/api/data');

    return {
      data,
      pending,
      error
    };
  }
}

在這個例子中，useFetch被用來獲取/api/data的資料。data包含從 API 返回的資料，pending
是一個布林值，表示請求是否正在進行中，error包含任何可能發生的錯誤。

進階用法

useFetch也支援更高階的用法，例如自定義請求選項、處理響應和錯誤等。

  1. 自定義請求選項：可以傳遞一個物件作為第二個引數，來配置請求，如設定請求方法、頭部資訊等。
setup() {
  const { data, pending, error } = useFetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' } });

  return {
    data,
    pending,
    error
  };
}
  1. 處理響應和錯誤：可以新增額外的邏輯來處理響應資料或錯誤。
setup() {
  const { data, pending, error } = useFetch('/api/data');

  if (error.value) {
    console.error('Error fetching data:', error.value);
  }

  return {
    data,
    pending,
    error
  };
}
  1. 動態 URL：可以傳遞一個返回 URL 的函式，使得 URL 可以根據元件的狀態動態變化。
setup() {
  const url = computed(() => `/api/data?id=${someId.value}`);
  const { data, pending, error } = useFetch(url);

  return {
    data,
    pending,
    error
  };
}

在這個例子中，URL 是根據someId的值動態生成的。

透過這些進階用法，useFetch可以適應更復雜的資料獲取需求，同時保持程式碼的清晰和簡潔。

2.2 useHead

useHead是 Nuxt 3 中的一個核心 Composable，用於管理元件的<head>後設資料，如標題、meta
標籤、圖示等。它簡化了在多個元件中管理頭部後設資料的過程，確保在整個應用中保持一致性和SEO最佳化。

基本用法

  1. 匯入 useHead：在元件中匯入useHead。
  2. 使用 useHead：在元件的setup函式中呼叫useHead，返回一個head物件，你可以在這個物件上新增或修改頭部後設資料。

示例程式碼如下：

// components/MyComponent.vue
import { useHead } from '#app';

export default {
  setup() {
    const head = useHead();

    head.title('My Component Title');
    head.meta({ name: 'description', content: 'This is a description for my component' });

    return {
      head
    };
  }
}

在這個例子中，head.title設定了元件的標題，head.meta新增了一個描述元標籤。

進階用法

  1. 動態頭部資料：你可以根據元件的狀態動態設定頭部後設資料。
setup() {
  const title = computed(() => `My Component - ${someValue.value}`);
  const head = useHead();

  head.title(title);

  return {
    title,
    head
  };
}
  1. 預渲染最佳化：useHead可以配合預渲染（SSR）來設定預渲染時的頭部後設資料，這對於SEO非常重要。
setup() {
  const head = useHead();

  if (process.server) {
    head.title('My Component Title (Server-side)');
  }

  return {
    head
  };
}
  1. 處理預設頭部：useHead會自動處理 Nuxt 的預設頭部，你可以覆蓋它們，但也可以選擇保留預設的。
setup() {
  const head = useHead();

  head.meta({ ...head.meta(), name: 'robots', content: 'noindex, nofollow' });

  return {
    head
  };
}

在這個例子中，新增了一個新的元標籤，同時保留了預設的元標籤。

useHead提供了一種靈活的方式來管理元件的頭部後設資料，使得整個應用的SEO最佳化和後設資料一致性變得簡單。

2.3 useRuntimeConfig

useRuntimeConfig是 Nuxt 3 中的一個核心 Composable，用於在應用的執行時獲取配置資訊。它使得在不同環境（開發、生產）下使用不同的配置變得簡單。

基本用法

  1. 匯入 useRuntimeConfig：在元件中匯入useRuntimeConfig。
  2. 使用 useRuntimeConfig：在元件的setup函式中呼叫useRuntimeConfig，返回一個物件，包含了應用的執行時配置。

示例程式碼如下：

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.public.apiBase);

    return {
      config
    };
  }
}

在這個例子中，config.public.apiBase獲取了應用的公共配置資訊中的apiBase屬性。

進階用法

  1. 區分環境：你可以根據不同的環境（開發、生產）使用不同的配置。
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    }
  }
});

在這個例子中，根據不同的環境設定了不同的apiBase值。

  1. 私有配置：你可以在runtimeConfig中設定私有配置，這些配置只在伺服器端可用。
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: 'my-secret-key'
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.secretKey);

    return {
      config
    };
  }
}

在這個例子中，config.secretKey獲取了應用的私有配置資訊中的secretKey屬性。

  1. 使用defineNuxtConfig自定義配置：你可以使用defineNuxtConfig函式自定義配置，並在runtimeConfig中使用它們。
// nuxt.config.ts
export default defineNuxtConfig({
  myCustomConfig: 'my-custom-value',
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    },
    myCustomConfig: {
      type: String,
      default: 'default-value'
    }
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.myCustomConfig);

    return {
      config
    };
  }
}

在這個例子中，使用defineNuxtConfig自定義了一個名為myCustomConfig的配置，並在runtimeConfig中使用了它。

useRuntimeConfig提供了一種簡單、強大的方式來獲取應用的執行時配置，同時支援區分環境和自定義配置。

2.4 useRequestEvent

2.5 useAppConfig

2.6 useAsyncData

2.7 useCookie

2.8 useError

2.9 useHeadSafe

2.10 useHydration

2.11 useLazyAsyncData

2.12 useLazyFetch

2.13 useNuxtApp

2.14 useNuxtData

2.15 useRequestHeaders

2.16 useRequestURL

2.17 useRoute

2.18 useSeoMeta

2.19 useRouter

2.20 useServerSeoMeta

2.21 useState

附錄

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用 | cmdragon's Blog

往期文章歸檔：

  • 掌握 Nuxt 3 中的狀態管理：實踐指南 | cmdragon's Blog
  • Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon's Blog
  • Nuxt 3元件開發與管理 | cmdragon's Blog
  • Nuxt3頁面開發實戰探索 | cmdragon's Blog
  • Nuxt.js 深入淺出：目錄結構與檔案組織詳解 | cmdragon's Blog
  • 安裝 Nuxt.js 的步驟和注意事項 | cmdragon's Blog
  • 探索Web Components | cmdragon's Blog
  • Vue微前端架構與Qiankun實踐理論指南 | cmdragon's Blog
  • Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon's Blog
  • Tailwind CSS 響應式設計實戰指南 | cmdragon's Blog

相關文章