Nuxt.js 数据获取全面指南：从基础到高级实践-CSDN博客

在现代 Web 应用开发中，高效、可靠的数据获取是构建优秀用户体验的关键。Nuxt.js 作为一个基于 Vue.js 的元框架，为开发者提供了一套完整的数据获取解决方案，既支持客户端渲染(CSR)，也支持服务器端渲染(SSR)和静态站点生成(SSG)。本文将深入探讨 Nuxt.js 的各种数据获取方法，分析它们的适用场景，并通过实际示例展示如何在实际项目中应用这些技术。

一、Nuxt.js 数据获取概述

1.1 为什么数据获取如此重要

数据是 Web 应用的灵魂，无论是展示商品列表、用户评论，还是实时通知，都需要从各种数据源获取信息。Nuxt.js 作为全栈框架，其数据获取能力直接影响着应用的：

性能：合理的数据获取策略可以减少加载时间
SEO：正确的服务器端数据获取能提升搜索引擎优化
用户体验：流畅的数据加载和更新机制提升用户满意度
开发效率：统一的数据获取模式简化开发流程

1.2 Nuxt.js 数据获取的特点

Nuxt.js 的数据获取系统具有以下显著特点：

同构性：同一套代码可在客户端和服务器端运行
自动化：根据渲染模式自动选择最佳数据获取策略
组合式API：与 Vue 3 的组合式 API 完美集成
类型安全：对 TypeScript 提供良好支持
灵活性：支持从 REST API、GraphQL 或任何数据源获取数据

二、客户端数据获取

2.1 useFetch 基础用法

useFetch 是 Nuxt 3 中最简单的数据获取方式，特别适合快速发起 HTTP 请求：

<script setup>
const { data, pending, error, refresh } = await useFetch('/api/products')
</script>

<template>
  <div v-if="pending">加载中...</div>
  <div v-else-if="error">错误: {{ error.message }}</div>
  <ul v-else>
    <li v-for="product in data" :key="product.id">
      {{ product.name }}
    </li>
  </ul>
</template>

关键点分析：

data: 响应式引用，包含获取的数据
pending: 表示请求状态的布尔值
error: 请求失败时的错误对象
refresh: 重新执行请求的函数

2.2 高级配置选项

useFetch 支持丰富的配置选项：

const { data } = await useFetch('/api/search', {
  method: 'POST',
  params: { q: 'nuxt' },
  headers: { 'Authorization': 'Bearer token' },
  baseURL: 'https://api.example.com',
  timeout: 5000,
  retry: 3,
  retryDelay: 1000,
  onRequest({ request, options }) {
    // 请求前处理
  },
  onResponse({ response, options }) {
    // 响应处理
  },
  onResponseError({ response, options }) {
    // 响应错误处理
  }
})

2.3 懒加载数据

对于非关键数据，可以使用懒加载版本避免阻塞页面渲染：

const { data } = await useLazyFetch('/api/analytics')

// 或者使用 useLazyAsyncData
const { data } = await useLazyAsyncData('analytics', () => $fetch('/api/analytics'))

三、服务器端数据获取

3.1 服务器端 vs 客户端数据获取

特性	服务器端获取	客户端获取
执行环境	仅在服务器端	仅在客户端
SEO 友好性	高	低
首次加载速度	快	慢
服务器负载	高	低
适用场景	关键SEO数据	用户交互数据

3.2 页面级数据获取

在页面组件中，Nuxt.js 会自动处理服务器端数据获取：

<script setup>
// 这个调用会在服务器端执行（如果是SSR）
const { data: products } = await useAsyncData('products', () => {
  return $fetch('/api/products')
})
</script>

3.3 组件级数据获取

对于需要在组件中获取数据的情况：

// components/ProductList.vue
<script setup>
const { data } = await useAsyncData('product-list', () => $fetch('/api/products'))
</script>

注意：组件级数据获取只在页面级 useAsyncData 完成后才会执行。

四、API 路由与数据获取

4.1 创建 API 路由

Nuxt.js 内置了创建 API 路由的能力：

// server/api/products.ts
export default defineEventHandler(async (event) => {
  // 从数据库获取数据
  const products = await database.getProducts()
  
  // 返回数据
  return {
    status: 'success',
    data: products,
    timestamp: new Date()
  }
})

4.2 处理请求参数

// server/api/products/[id].ts
export default defineEventHandler(async (event) => {
  // 获取路由参数
  const { id } = event.context.params
  
  // 获取查询参数
  const { limit } = getQuery(event)
  
  const product = await database.getProductById(id)
  
  if (!product) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Product not found'
    })
  }
  
  return product
})

4.3 中间件处理

可以在 API 路由中使用中间件进行身份验证等操作：

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  const authToken = getHeader(event, 'Authorization')
  
  if (!authToken) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Unauthorized'
    })
  }
  
  // 验证token...
})

五、高级数据获取模式

5.1 并行数据获取

使用 Promise.all 优化多个并行请求：

<script setup>
const { data: pageData } = await useAsyncData('page-data', async () => {
  const [products, categories, user] = await Promise.all([
    $fetch('/api/products'),
    $fetch('/api/categories'),
    $fetch('/api/user')
  ])
  
  return { products, categories, user }
})
</script>

5.2 依赖数据获取

处理有依赖关系的请求：

<script setup>
const { data: user } = await useAsyncData('user', () => $fetch('/api/user'))

const { data: orders } = await useAsyncData('orders', () => {
  if (!user.value) return []
  return $fetch(`/api/users/${user.value.id}/orders`)
}, {
  watch: [user] // 当user变化时重新获取
})
</script>

5.3 数据转换

const { data } = await useFetch('/api/products', {
  transform: (products) => {
    return products.map(product => ({
      ...product,
      priceWithTax: product.price * 1.2
    }))
  }
})

5.4 缓存策略

const { data } = await useAsyncData('products', () => $fetch('/api/products'), {
  getCachedData(key) {
    // 从缓存中获取数据
    return nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
})

六、性能优化技巧

6.1 数据分页

const page = ref(1)
const { data: products } = await useAsyncData('products', () => $fetch('/api/products', {
  params: { page: page.value }
}), {
  watch: [page]
})

6.2 无限滚动

const products = ref([])
const page = ref(1)
const loading = ref(false)
const hasMore = ref(true)

async function loadMore() {
  if (loading.value || !hasMore.value) return
  
  loading.value = true
  const { data } = await useFetch('/api/products', {
    params: { page: page.value }
  })
  
  if (data.value.length) {
    products.value.push(...data.value)
    page.value++
  } else {
    hasMore.value = false
  }
  
  loading.value = false
}

6.3 数据预取

// 预取链接数据
useLinkPrefetcher()

// 手动预取
defineNuxtLink({
  prefetch: true
})

七、错误处理与调试

7.1 全局错误处理

// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (err) => {
    console.error('Global error:', err)
  })
  
  nuxtApp.hook('vue:error', (err) => {
    console.error('Vue error:', err)
  })
})

7.2 请求错误处理

const { data, error } = await useFetch('/api/data', {
  onResponseError({ response }) {
    console.error('Response error:', response.statusText)
    if (response.status === 401) {
      navigateTo('/login')
    }
  }
})

7.3 调试技巧

使用 console.log 查看请求/响应
利用 Nuxt DevTools 检查数据流
查看网络请求的详细日志
使用 useRequestHeaders 调试服务器端请求

八、实战案例：电商网站数据获取

8.1 产品列表页

<script setup>
// 服务器端获取产品列表
const { data: products } = await useAsyncData('products', () => $fetch('/api/products'))

// 客户端获取用户信息
const { data: user } = await useLazyAsyncData('user', () => $fetch('/api/user'))
</script>

8.2 产品详情页

<script setup>
const route = useRoute()

const { data: product } = await useAsyncData(`product-${route.params.id}`, () => {
  return $fetch(`/api/products/${route.params.id}`)
})

const { data: related } = await useLazyFetch(`/api/products/${route.params.id}/related`)
</script>

8.3 购物车功能

<script setup>
const { data: cart, refresh: refreshCart } = await useAsyncData('cart', () => $fetch('/api/cart'))

async function addToCart(productId, quantity = 1) {
  await $fetch('/api/cart', {
    method: 'POST',
    body: { productId, quantity }
  })
  refreshCart()
}
</script>