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

来源:https://www.cnblogs.com/Amd794/p/18263489
-Advertisement-
Play Games

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


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

往期文章歸檔：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【ASeeker】Android 源碼撈針，服務介面掃描神器
    ASeeker 是一個 Android 源碼應用系統服務介面掃描工具。是我們在做虛擬化分身產品『 空殼 』過程中的內部開發工具，目的是為了提升 Android 系統各版本適配效率。 ...
  • 被蘋果11.2警告的解決方案
    11.2警告郵件內容 Hello XXX, We're writing to inform you that your company isn't in compliance with the Apple Developer Program License Agreement (DPLA). Sec ...
  • Flutter 藉助SearchDelegate實現搜索頁面，實現搜索建議、搜索結果，解決IOS拼音問題
    使用Flutter自帶的SearchDelegate組件實現搜索界面，通過魔改實現如下效果：搜素建議、搜索結果，支持刷新和載入更多，解決IOS中文輸入拼音問題。 ...
  • RecyclerView設置預設焦點跟多頁面焦點搶占
    場景：多個tab切換，顯示不同的Fragment，其中一個Fragment佈局是兩個RecyclerView，分別位於左右兩側 需求：首次從tabView切換到改tab頁時，焦點從tabView首次往下移動時，需要落焦在右側的第一個item上面 如果按照系統原生邏輯，從tabView下移，可能預設位 ...
  • 騷操作：如何讓一個網頁一直處於空白情況？
    ‍ 寫在開頭 點贊 + 收藏 學會 如題，慣性思路很簡單，就是直接擼上一個空內容的html。 註：以下都是在現代瀏覽器中執行，主要為**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) ** <!DOCTYPE ...
  • 初學者必讀：如何使用 Nuxt 中間件簡化網站開發
    本文概述了Nuxt 3框架的升級特點，對比Nuxt 2，詳細解析中間件應用、配置策略與實戰示例，涵蓋功能、錯誤管理、優化技巧，並探討與Nuxt 3核心組件集成方法，給出最佳實踐和問題解決方案，強調利用Vue 3和Serverless Functions提升中間件效能。 ...
  • Vue3 中的 v-bind 指令：你不知道的那些工作原理
    前言 v-bind指令想必大家都不陌生，並且都知道他支持各種寫法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的寫法)。這三種寫法的作用都是一樣的，將title變數綁定到div標簽的title屬性 ...
  • [HTTP] GET請求的body能否攜帶數據？
    RFC規範並沒有指明HTTP協議的GET方法是否不能攜帶body數據，但是對於瀏覽器環境下的XHR和fetch API的規範來說，它們的規範限制了它們不能在GET中攜帶body，而postman或apifox等介面測試工具則由於不遵循這些規範而可以攜帶body。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類