深入探索 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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類