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

title: Nuxt 使用指南：掌握 useNuxtApp 和運行時上下文 date: 2024/7/21 updated: 2024/7/21 author: cmdragon excerpt: 摘要：“Nuxt 使用指南：掌握 useNuxtApp 和運行時上下文”介紹了Nuxt 3中useN ...

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
插件
組件
鉤子
上下文

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

在 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

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

什麼是 useNuxtApp？

使用示例

在插件中使用

在組件中使用

方法

1. provide 函數

使用示例

創建插件

在組件中使用

2. hook 函數

使用示例

創建插件

可用的運行時鉤子

3. callHook 函數

使用示例

創建插件並調用鉤子

非同步調用鉤子

屬性

1. vueApp 屬性

1.1 component()

1.2 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

往期文章歸檔：

什麼是 `useNuxtApp`？

1. `provide` 函數

2. `hook` 函數

3. `callHook` 函數

1. `vueApp` 屬性

1.1 `component()`

1.2 `directive()`

1.3 `use()`

`ssrContext` 屬性

`payload`

`isHydrating`

`runWithContext`