title: 深入探索 Nuxt3 Composables：掌握目錄架構(gòu)與內(nèi)置API的高效應(yīng)用
date: 2024/6/23
updated: 2024/6/23
author: cmdragon

excerpt:
摘要：“本文深入探討了Nuxt3 Composables，重點(diǎn)介紹了其目錄架構(gòu)和內(nèi)置API的高效應(yīng)用。通過(guò)學(xué)習(xí)本文，讀者將能夠更好地理解和利用Nuxt3 Composables來(lái)構(gòu)建高效的應(yīng)用程序�！�

categories:

• 前端開(kāi)發(fā)

tags:

• Nuxt3
• Composables
• 目錄架構(gòu)
• 內(nèi)置API
• 高效應(yīng)用程序
• 構(gòu)建應(yīng)用
• 學(xué)習(xí)

掃碼關(guān)注或者微信搜一搜： 編程智域 前端至全棧交流與成長(zhǎng)

Nuxt3 Composables

1.1 Composables 概述

Composables 是 Vue 3 中的一種新特性，它允許在組件之間共享可復(fù)用的邏輯和計(jì)算。Composables 是輕量級(jí)的，它們不是真正的組件，而是獨(dú)立的
JavaScript 文件，通常位于 ~/composables 目錄下。它們可以包含數(shù)據(jù)、方法、計(jì)算屬性等，可以被任何組件導(dǎo)入并使用，從而幫助組織代碼，減少重復(fù)，并提高代碼的可復(fù)用性。

1.2 安裝與配置

在 Nuxt.js 3 中，由于 Nuxt 本身已經(jīng)集成了 Vue 3 的 Composables，所以你不需要額外安裝。只需在項(xiàng)目中創(chuàng)建一個(gè) ~/composables
文件夾，然后在其中創(chuàng)建 .js 或 .ts 文件來(lái)定義你的 Composables。

Nuxt 提供了自動(dòng)導(dǎo)入和使用 Composables 的支持。在需要使用 Composables 的組件中，只需使用 import 語(yǔ)句導(dǎo)入，例如：

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

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

1.3 使用 Composables 的基本步驟

1. 創(chuàng)建 Composables ：在 ~/composables 文件夾中，創(chuàng)建一個(gè)文件（如 myFunction.js ），定義你的函數(shù)或計(jì)算邏輯。
2. 導(dǎo)入 Composables ：在需要使用的地方，如組件的 setup 函數(shù)中，導(dǎo)入需要的 Composables。
3. 使用 Composables ：在導(dǎo)入后，可以直接使用 Composables 中的變量、方法或計(jì)算屬性。
4. 更新和響應(yīng)式 ：由于 Vue 3 的響應(yīng)式系統(tǒng)，當(dāng)你在 Composables 中修改數(shù)據(jù)時(shí)，依賴(lài)于這些數(shù)據(jù)的組件會(huì)自動(dòng)更新。

1.4 Composables 與 Vue 3 的響應(yīng)式系統(tǒng)

Composables 中的數(shù)據(jù)默認(rèn)是響應(yīng)式的，因?yàn)樗鼈兪?Vue 3 組件的一部分。當(dāng)你在 Composables 中定義一個(gè)數(shù)據(jù)對(duì)象或計(jì)算屬性，并在組件中使用它，Vue
的變更檢測(cè)系統(tǒng)會(huì)在數(shù)據(jù)變化時(shí)自動(dòng)更新組件。例如：

// 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!')); // 監(jiān)聽(tīng)數(shù)據(jù)變化
}

當(dāng) myData 的值改變時(shí)，組件中的 watch 會(huì)觸發(fā)。這就是 Composables 和 Vue 3 響應(yīng)式系統(tǒng)協(xié)同工作的基本方式。

核心 Composables

2.1 useFetch

useFetch 是 Nuxt 3 提供的一個(gè)核心 Composables，用于簡(jiǎn)化從 API 獲取數(shù)據(jù)的過(guò)程。它封裝了異步數(shù)據(jù)獲取的邏輯，使得在組件中獲取數(shù)據(jù)變得簡(jiǎn)單和直觀。

基本用法

1. 導(dǎo)入 useFetch ：在組件中導(dǎo)入 useFetch 。
2. 使用 useFetch ：在組件的 setup 函數(shù)中調(diào)用 useFetch ，并傳入一個(gè) URL 或一個(gè)返回 URL 的函數(shù)。

示例代碼如下：

// components/MyComponent.vue
import { useFetch } from '#app'; // 使用 Nuxt 3 的內(nèi)置 useFetch

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

    return {
      data,
      pending,
      error
    };
  }
}

在這個(gè)例子中， useFetch 被用來(lái)獲取 /api/data 的數(shù)據(jù)。 data 包含從 API 返回的數(shù)據(jù)， pending
是一個(gè)布爾值，表示請(qǐng)求是否正在進(jìn)行中， error 包含任何可能發(fā)生的錯(cuò)誤。

進(jìn)階用法

useFetch 也支持更高級(jí)的用法，例如自定義請(qǐng)求選項(xiàng)、處理響應(yīng)和錯(cuò)誤等。

1. 自定義請(qǐng)求選項(xiàng) ：可以傳遞一個(gè)對(duì)象作為第二個(gè)參數(shù)，來(lái)配置請(qǐng)求，如設(shè)置請(qǐng)求方法、頭部信息等。

setup() {
  const { data, pending, error } = useFetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' } });

  return {
    data,
    pending,
    error
  };
}

1. 處理響應(yīng)和錯(cuò)誤 ：可以添加額外的邏輯來(lái)處理響應(yīng)數(shù)據(jù)或錯(cuò)誤。

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

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

  return {
    data,
    pending,
    error
  };
}

1. 動(dòng)態(tài) URL ：可以傳遞一個(gè)返回 URL 的函數(shù)，使得 URL 可以根據(jù)組件的狀態(tài)動(dòng)態(tài)變化。

setup() {
  const url = computed(() => `/api/data?id=${someId.value}`);
  const { data, pending, error } = useFetch(url);

  return {
    data,
    pending,
    error
  };
}

在這個(gè)例子中，URL 是根據(jù) someId 的值動(dòng)態(tài)生成的。

通過(guò)這些進(jìn)階用法， useFetch 可以適應(yīng)更復(fù)雜的數(shù)據(jù)獲取需求，同時(shí)保持代碼的清晰和簡(jiǎn)潔。

2.2 useHead

useHead 是 Nuxt 3 中的一個(gè)核心 Composable，用于管理組件的 元數(shù)據(jù)，如標(biāo)題、meta
標(biāo)簽、圖標(biāo)等。它簡(jiǎn)化了在多個(gè)組件中管理頭部元數(shù)據(jù)的過(guò)程，確保在整個(gè)應(yīng)用中保持一致性和SEO優(yōu)化。

基本用法

1. 導(dǎo)入 useHead ：在組件中導(dǎo)入 useHead 。
2. 使用 useHead ：在組件的 setup 函數(shù)中調(diào)用 useHead ，返回一個(gè) head 對(duì)象，你可以在這個(gè)對(duì)象上添加或修改頭部元數(shù)據(jù)。

示例代碼如下：

// 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
    };
  }
}

在這個(gè)例子中， head.title 設(shè)置了組件的標(biāo)題， head.meta 添加了一個(gè)描述元標(biāo)簽。

進(jìn)階用法

1. 動(dòng)態(tài)頭部數(shù)據(jù) ：你可以根據(jù)組件的狀態(tài)動(dòng)態(tài)設(shè)置頭部元數(shù)據(jù)。

setup() {
  const title = computed(() => `My Component - ${someValue.value}`);
  const head = useHead();

  head.title(title);

  return {
    title,
    head
  };
}

1. 預(yù)渲染優(yōu)化 ： useHead 可以配合預(yù)渲染（SSR）來(lái)設(shè)置預(yù)渲染時(shí)的頭部元數(shù)據(jù)，這對(duì)于SEO非常重要。

setup() {
  const head = useHead();

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

  return {
    head
  };
}

1. 處理默認(rèn)頭部 ： useHead 會(huì)自動(dòng)處理 Nuxt 的默認(rèn)頭部，你可以覆蓋它們，但也可以選擇保留默認(rèn)的。

setup() {
  const head = useHead();

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

  return {
    head
  };
}

在這個(gè)例子中，添加了一個(gè)新的元標(biāo)簽，同時(shí)保留了默認(rèn)的元標(biāo)簽。

useHead 提供了一種靈活的方式來(lái)管理組件的頭部元數(shù)據(jù)，使得整個(gè)應(yīng)用的SEO優(yōu)化和元數(shù)據(jù)一致性變得簡(jiǎn)單。

2.3 useRuntimeConfig

useRuntimeConfig 是 Nuxt 3 中的一個(gè)核心 Composable，用于在應(yīng)用的運(yùn)行時(shí)獲取配置信息。它使得在不同環(huán)境（開(kāi)發(fā)、生產(chǎn)）下使用不同的配置變得簡(jiǎn)單。

基本用法

1. 導(dǎo)入 useRuntimeConfig ：在組件中導(dǎo)入 useRuntimeConfig 。
2. 使用 useRuntimeConfig ：在組件的 setup 函數(shù)中調(diào)用 useRuntimeConfig ，返回一個(gè)對(duì)象，包含了應(yīng)用的運(yùn)行時(shí)配置。

示例代碼如下：

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

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

    console.log(config.public.apiBase);

    return {
      config
    };
  }
}

在這個(gè)例子中， config.public.apiBase 獲取了應(yīng)用的公共配置信息中的 apiBase 屬性。

進(jìn)階用法

1. 區(qū)分環(huán)境 ：你可以根據(jù)不同的環(huán)境（開(kāi)發(fā)、生產(chǎn)）使用不同的配置。

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    }
  }
});

在這個(gè)例子中，根據(jù)不同的環(huán)境設(shè)置了不同的 apiBase 值。

1. 私有配置 ：你可以在 runtimeConfig 中設(shè)置私有配置，這些配置只在服務(wù)器端可用。

// 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
    };
  }
}

在這個(gè)例子中， config.secretKey 獲取了應(yīng)用的私有配置信息中的 secretKey 屬性。

1. 使用 defineNuxtConfig 自定義配置 ：你可以使用 defineNuxtConfig 函數(shù)自定義配置，并在 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
    };
  }
}

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

useRuntimeConfig 提供了一種簡(jiǎn)單、強(qiáng)大的方式來(lái)獲取應(yīng)用的運(yùn)行時(shí)配置，同時(shí)支持區(qū)分環(huán)境和自定義配置。

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

附錄

余下文章內(nèi)容請(qǐng)點(diǎn)擊跳轉(zhuǎn)至 個(gè)人博客頁(yè)面 或者 掃碼關(guān)注或者微信搜一搜： 編程智域 前端至全棧交流與成長(zhǎng) ，閱讀完整的文章： 深入探索 Nuxt3 Composables：掌握目錄架構(gòu)與內(nèi)置API的高效應(yīng)用 | cmdragon's Blog

往期文章歸檔：

• 掌握 Nuxt 3 中的狀態(tài)管理：實(shí)踐指南 | cmdragon's Blog
• Nuxt 3 路由系統(tǒng)詳解：配置與實(shí)踐指南 | cmdragon's Blog
• Nuxt 3組件開(kāi)發(fā)與管理 | cmdragon's Blog
• Nuxt3頁(yè)面開(kāi)發(fā)實(shí)戰(zhàn)探索 | cmdragon's Blog
• Nuxt.js 深入淺出：目錄結(jié)構(gòu)與文件組織詳解 | cmdragon's Blog
• 安裝 Nuxt.js 的步驟和注意事項(xiàng) | cmdragon's Blog
• 探索Web Components | cmdragon's Blog
• Vue微前端架構(gòu)與Qiankun實(shí)踐理論指南 | cmdragon's Blog
• Vue 3深度探索：自定義渲染器與服務(wù)端渲染 | cmdragon's Blog
• Tailwind CSS 響應(yīng)式設(shè)計(jì)實(shí)戰(zhàn)指南 | cmdragon's Blog