Nuxt 使用指南：掌握 useNuxtApp 和執行時上下文

Amd794發表於2024-07-21
UXAPP

title: Nuxt 使用指南：掌握 useNuxtApp 和執行時上下文
date: 2024/7/21
updated: 2024/7/21
author: cmdragon

excerpt:
摘要：“Nuxt 使用指南：掌握 useNuxtApp 和執行時上下文”介紹了Nuxt 3中useNuxtApp的使用，包括訪問Vue例項、執行時鉤子、配置變數和SSR上下文。文章詳細說明了provide和hook函式的應用，以及如何在外掛和元件中利用這些功能。同時，探討了vueApp屬性、ssrContext和payload的使用場景，以及isHydrating和runWithContext方法的作用。

categories:

  • 前端開發

tags:

  • Nuxt3
  • VueJS
  • SSR
  • 外掛
  • 元件
  • 鉤子
  • 上下文

image
image

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

在 Nuxt 應用的開發過程中，useNuxtApp 是一個極其關鍵的內建可組合函式，它為開發者提供了訪問 Nuxt 共享執行時上下文的重要途徑。無論是在客戶端還是伺服器端，useNuxtApp 都發揮著不可或缺的作用。

什麼是 useNuxtApp？

useNuxtApp 是一個內建的組合式函式，它讓你可以訪問以下內容：

  • Vue 應用程式例項：你可以透過 useNuxtApp 獲取全域性的 Vue 應用程式例項，進而使用 Vue 的相關功能，如註冊全域性元件和指令等。
  • 執行時鉤子：你可以使用 hook 方法來註冊自定義的鉤子，以便在特定的生命週期事件中執行程式碼。例如，你可以在頁面開始渲染時執行某些操作。
  • 執行時配置變數：你可以訪問 Nuxt 應用的配置變數，這些變數可以在應用的不同部分共享。
  • 內部狀態：你可以訪問與伺服器端渲染（SSR）相關的上下文資訊，如 ssrContext 和 payload。這些資訊對於處理伺服器端請求和響應非常重要。

使用示例

以下是如何在 Nuxt 應用中使用 useNuxtApp 的示例：

在外掛中使用

// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 提供一個全域性函式
  nuxtApp.provide('greet', (name) => `Hello, ${name}!`);

  // 註冊一個鉤子
  nuxtApp.hook('page:start', () => {
    console.log('Page is starting...');
  });
});

在元件中使用

<template>
  <div>{{ greeting }}</div>
</template>

<script setup>
const nuxtApp = useNuxtApp(); // 獲取 nuxtApp 例項
const greeting = nuxtApp.$greet('World'); // 呼叫提供的函式
</script>

方法

provide 函式是 Nuxt.js 中用於擴充套件執行時上下文的一個重要功能。透過這個函式，你可以將值和輔助方法提供給 Nuxt 應用中的所有組合函式和元件，使它們能夠共享這些值和方法。

1. provide 函式

provide 函式接受兩個引數：

  • name：一個字串，表示你要提供的值的名稱。
  • value：你要提供的值或函式。

使用示例

以下是如何使用 provide 函式建立 Nuxt 外掛並在應用中使用它的示例：

建立外掛

首先，你需要建立一個外掛檔案，在其中使用 provide 函式：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  // 使用 provide 函式提供一個自定義方法
  nuxtApp.provide('hello', (name) => `Hello ${name}!`);
});

在元件中使用

接下來，你可以在任何元件中使用 useNuxtApp 來訪問這個提供的方法：

<template>
  <div>{{ greeting }}</div>
</template>

<script setup>
const nuxtApp = useNuxtApp(); // 獲取 nuxtApp 例項

// 呼叫提供的 hello 方法
const greeting = nuxtApp.$hello('World'); // 輸出 "Hello World!"
</script>

在上面的示例中，$hello 成為 nuxtApp 上下文的一個新的自定義部分。你可以在任何可以訪問 nuxtApp 的地方使用這個方法。

2. hook 函式

hook 函式用於在 Nuxt 應用的生命週期中註冊鉤子。它接受兩個引數：

  • name：一個字串，表示鉤子的名稱。
  • cb：一個回撥函式，當鉤子被觸發時執行。

使用示例

以下是如何在 Nuxt 外掛中使用 hook 函式的示例：

建立外掛

你可以建立一個外掛檔案，並在其中使用 hook 函式來註冊鉤子。例如，下面的程式碼在頁面開始渲染時和 Vue.js 發生錯誤時新增自定義邏輯：

// plugins/test.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 註冊一個鉤子，在頁面開始渲染時觸發
  nuxtApp.hook('page:start', () => {
    console.log('頁面開始渲染');
    // 在這裡新增你的程式碼，例如記錄日誌、初始化狀態等
  });

  // 註冊一個鉤子，當 Vue.js 發生錯誤時觸發
  nuxtApp.hook('vue:error', (..._args) => {
    console.log('捕獲到 Vue 錯誤:', ..._args);
    // 可以在這裡進行錯誤處理，例如傳送錯誤報告
    // if (process.client) {
    //   console.log(..._args);
    // }
  });
});

可用的執行時鉤子

Nuxt.js 提供了一些內建的執行時鉤子，你可以在應用中使用它們。以下是一些常用的鉤子：

  • page:start：在頁面開始渲染時觸發。
  • vue:error：在 Vue.js 發生錯誤時觸發。
  • app:mounted：在應用掛載後觸發。
  • app:error：在應用發生錯誤時觸發。
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog

3. callHook 函式

callHook 函式接受兩個引數：

  • name：一個字串，表示要呼叫的鉤子的名稱。
  • ...args：可選的引數，可以傳遞給鉤子的回撥函式。

使用示例

以下是如何使用 callHook 函式的示例：

建立外掛並呼叫鉤子

假設你有一個外掛需要在初始化時呼叫一個名為 my-plugin:init 的鉤子，你可以這樣實現：

// plugins/myPlugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 註冊一個鉤子
  nuxtApp.hook('my-plugin:init', () => {
    console.log('我的外掛初始化鉤子被呼叫');
    // 在這裡可以執行初始化邏輯
  });

  // 呼叫鉤子
  nuxtApp.callHook('my-plugin:init').then(() => {
    console.log('鉤子呼叫完成');
  }).catch((error) => {
    console.error('鉤子呼叫出錯:', error);
  });
});

非同步呼叫鉤子

由於 callHook 返回一個 Promise，你可以使用 async/await 語法來簡化非同步呼叫的處理：

// plugins/myPlugin.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  // 註冊一個鉤子
  nuxtApp.hook('my-plugin:init', () => {
    console.log('我的外掛初始化鉤子被呼叫');
    // 在這裡可以執行初始化邏輯
  });

  // 使用 async/await 呼叫鉤子
  try {
    await nuxtApp.callHook('my-plugin:init');
    console.log('鉤子呼叫完成');
  } catch (error) {
    console.error('鉤子呼叫出錯:', error);
  }
});

屬性

1. vueApp 屬性

vueApp 是全域性的 Vue.js 應用程式例項，你可以透過 nuxtApp 訪問它。以下是一些有用的方法：

1.1 component()

  • 功能：註冊全域性元件或檢索已註冊的元件。

  • 用法：

    • 註冊元件：

      nuxtApp.vueApp.component('MyComponent', MyComponent);

    • 檢索元件：

      const MyComponent = nuxtApp.vueApp.component('MyComponent');

1.2 directive()

  • 功能：註冊全域性自定義指令或檢索已註冊的指令。

  • 用法：

    • 註冊指令：

      nuxtApp.vueApp.directive('my-directive', {
  // 指令定義
  beforeMount(el, binding) {
    // 指令邏輯
  }
});

    • 檢索指令：

      const myDirective = nuxtApp.vueApp.directive('my-directive');

1.3 use()

1.4 使用示例

ssrContext 屬性

1. url（字串）

2. event（unjs/h3請求事件）

3. payload（物件）

4. 使用示例

payload

1. serverRendered（布林值）

1. data（物件）

1. state（物件）

自定義型別和輔助函式

自定義負載外掛示例

isHydrating

runWithContext

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog

往期文章歸檔：

  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog

相關文章