如何在Nuxt中使用Hooks？Composition API及加载指示器相关疑问

1. 模块中结合Composition API使用Hooks #

Nuxt模块的框架级钩子与Vue Composition API可通过useNuxtApp衔接：

• 在模块中注册目标Nuxt钩子或封装逻辑；
• 在组件的Composition代码里，通过useNuxtApp()获取Nuxt应用实例，调用其hook方法监听钩子。

示例：

// 模块代码（modules/your-module.ts）
export default defineNuxtModule({
  setup(options, nuxt) {
    // 模块侧注册钩子逻辑
    nuxt.hook('page:loading:end', () => {
      // 模块自定义处理
    })
  }
})

// 组件中的Composition代码
const nuxtApp = useNuxtApp()
nuxtApp.hook('page:loading:end', () => {
  // 组件侧响应逻辑，比如更新加载状态
})

若需模块向组件暴露自定义钩子能力，可在模块中通过nuxt.provide()注入注册方法，让组件按需调用。

2. Nuxt插件的取值与调用 #

创建插件时通过provide选项暴露值或方法，再在组件中用useNuxtApp获取：

步骤1：编写插件 #

// plugins/my-plugin.ts
export default defineNuxtPlugin(nuxtApp => {
  const pluginValue = '插件提供的值'
  const pluginMethod = () => '调用插件方法返回的内容'

  return {
    provide: {
      pluginValue,
      pluginMethod
    }
  }
})

步骤2：在组件中使用 #

// 组件的Composition代码
const { $pluginValue, $pluginMethod } = useNuxtApp()

console.log($pluginValue) // 输出：插件提供的值
console.log($pluginMethod()) // 输出：调用插件方法返回的内容

模板中可直接使用{{ $pluginValue }}或{{ $pluginMethod() }}。

3. Nuxt支持常规Vue生命周期钩子吗？ #

完全支持。Vue原生的Options API、Composition API生命周期钩子，在Nuxt组件中均可正常使用，行为与纯Vue项目一致。

示例（Composition API）：

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件在客户端挂载完成')
})

onUnmounted(() => {
  console.log('组件卸载')
})

注意：onMounted等钩子仅在客户端执行，若需服务端逻辑可使用Nuxt特有的onServerPrefetch等钩子。

4. 用page:loading:end实现加载指示器 #

推荐两种实现方式：

方式一：全局监听（适合全局加载指示器） #

创建插件管理全局加载状态：

// plugins/loading.ts
export default defineNuxtPlugin(nuxtApp => {
  const isLoading = useState('isLoading', () => true)

  nuxtApp.hook('page:loading:start', () => {
    isLoading.value = true
  })

  nuxtApp.hook('page:loading:end', () => {
    isLoading.value = false
  })
})

在布局组件中使用状态：

<!-- layouts/default.vue -->
<template>
  <div v-if="isLoading" class="loading-overlay">
    <span>加载中...</span>
  </div>
  <slot />
</template>

<script setup>
const isLoading = useState('isLoading')
</script>

方式二：组件局部监听 #

<!-- 页面/组件中 -->
<script setup>
const nuxtApp = useNuxtApp()
const isLoading = ref(true)

nuxtApp.hook('page:loading:end', () => {
  isLoading.value = false
})
</script>

<template>
  <div v-if="isLoading">加载中...</div>
  <!-- 页面内容 -->
</template>

内容的提问来源于stack exchange，提问作者Goodie