vue-31（Nuxt.js 中的数据获取：asyncData和fetch）

Nuxt.js 中的数据获取：asyncData和fetch

Nuxt.js 为您的应用程序提供了强大而便捷的数据获取方式，尤其是在处理服务器端渲染（SSR）时。数据获取的两个主要方法是 asyncData 和 fetch。了解每种方法的细微差别以及何时使用它们，对于构建高效和性能卓越的 Nuxt.js 应用程序至关重要。本课将深入探讨这些方法的细节，探索它们的功能、用例和差异。

理解 asyncData

asyncData 是一个 Nuxt.js 生命周期钩子，在组件实例化 之前 被调用。这使得它非常适合获取渲染页面初始视图所需的数据。由于它在服务器端渲染（SSR）期间被调用，因此在此处获取的数据会直接注入到 HTML 中，从而提高 SEO 和感知性能。

asyncData 的主要特点

• 服务器端和客户端执行：asyncData 在页面首次请求时在服务器端运行，在路由之间导航时在客户端运行。
• 上下文对象： 它接收一个上下文对象作为第一个参数，提供对各种 Nuxt.js 功能的访问，如 params、query、store、env、app、req、res、redirect、error 和 route。
• 返回值： 它 必须 返回一个普通的 JavaScript 对象，其中包含将被合并到组件数据中的数据。
• this 上下文：asyncData 无法访问组件的 this 上下文，因为组件实例尚未创建。因此，您不能在 asyncData 中直接访问组件数据或方法。
• 用途： 主要用于获取初始页面渲染所需的数据。

asyncData 的示例

<template>
  <div>
    <h1>{{ post.title }}h1>
    <p>{{ post.content }}p>
  div>
template>

<script>
export default {
  async asyncData({ params, $axios, error }) {
    try {
      const { data } = await $axios.get(`/posts/${params.id}`);
      return { post: data };
    } catch (e) {
      error({ statusCode: 404, message: 'Post not found' });
    }
  }
};
script>

在这个例子中：

• 我们正在使用 asyncData 来根据路由参数中的 id（params.id）获取一篇博客文章。
• 我们使用 $axios（Nuxt 的内置 Axios 模块）来发起 API 请求。
• 获取到的数据以一个具有 post 属性的对象形式返回。这个 post 对象随后会被合并到组件的数据中，并在模板中可以被访问。
• 使用上下文对象中的 error 函数来处理错误，这使我们能够在帖子未找到时显示自定义错误页面。

使用 Vuex Store 的高级 asyncData 示例

<template>
  <div>
    <h1>{{ category.name }}h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}li>
    ul>
  div>
template>

<script>
export default {
  async asyncData({ params, store, error }) {
    try {
      await store.dispatch('categories/fetchCategory', params.categoryId);
      await store.dispatch('products/fetchProductsByCategory', params.categoryId);

      const category = store.state.categories.category;
      const products = store.state.products.products;

      return { category, products };
    } catch (e) {
      error({ statusCode: 500, message: 'Could not fetch category or products' });
    }
  },
  computed: {
   // 您也可以直接在模板或计算属性中访问 Vuex 存储
   // 但出于服务端渲染 (SSR) 的目的，通常最好从 asyncData 返回数据。
  }
};
script>

在这个例子中：

• 我们使用 asyncData 来派发 Vuex 动作，根据路由参数中的 categoryId 获取一个分类及其相关产品。
• 我们在返回数据前等待两个动作的完成。
• 获取到的分类和产品以对象形式返回，使其在组件模板中可用。
• 这展示了 asyncData 如何在 SSR 期间用于填充 Vuex 存储，确保应用程序的初始状态在服务器和客户端保持一致。

练习：为产品列表页面实现 asyncData

假设你正在构建一个电子商务网站。创建一个 Nuxt.js 页面来显示产品列表。使用 asyncData 从模拟 API 获取产品数据（你可以使用一个简单的 setTimeout 来模拟 API 调用）。在模板中显示产品名称和价格。包含错误处理，如果 API 调用失败则显示一个用户友好的消息。

理解 fetch

fetch 是另一个用于数据获取的 Nuxt.js 生命周期钩子，但它与 asyncData 在几个关键方面有所不同。主要区别在于 fetch _不需要_你返回获取的数据。相反，它被设计用来填充 Vuex store。

fetch 的主要特点

• 服务器端和客户端执行： 与 asyncData 类似，fetch 在服务器和客户端都运行。
• 上下文对象： 它也接收一个上下文对象，提供与 asyncData 相同的 Nuxt.js 功能访问。
• 返回值： 它不需要返回值。它的主要目的是修改 Vuex 存储。
• this 上下文：fetch _确实_可以访问组件的 this 上下文，允许你访问组件数据和函数。
• 用法： 主要用于获取数据并将其存储在 Vuex 存储中。

fetch 的示例

<template>
  <div>
    <h1>Latest Newsh1>
    <ul>
      <li v-for="newsItem in news" :key="newsItem.id">{{ newsItem.title }}li>
    ul>
  div>
template>

<script>
export default {
  computed: {
    news() {
      return this.$store.state.news.newsItems;
    }
  },
  async fetch({ store, $axios }) {
    try {
      const { data } = await $axios.get('/news');
      store.commit('news/setNewsItems', data);
    } catch (e) {
      console.error('Failed to fetch news:', e);
    }
  }
};
script>

在这个例子中：

• 我们使用 fetch 从 API 端点获取新闻项列表。
• 我们使用 $axios 发起 API 请求。
• 我们不是直接返回数据，而是向 Vuex store 提交一个突变（news/setNewsItems）来更新 newsItems 状态。
• 组件随后使用一个计算属性（news）来访问 Vuex store 中的 newsItems 并在模板中显示它们。

高级 fetch 示例（带动态参数）

<template>
  <div>
    <h1>Productsh1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }} - {{ product.price }}li>
    ul>
    <button @click="loadMore">Load Morebutton>
  div>
template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 10
    };
  },
  computed: {
    products() {
      return this.$store.state.products.products;
    }
  },
  async fetch({ store, $axios }) {
    try {
      const { data } = await $axios.get(`/products?_page=${this.page}&_limit=${this.limit}`);
      store.commit('products/addProducts', data);
    } catch (e) {
      console.error('Failed to fetch products:', e);
    }
  },
  methods: {
    async loadMore() {
      this.page++;
      await this.$fetch(); // Re-run the fetch hook
    }
  }
};
script>

在这个例子中：

• 我们使用 fetch 从 API 端点获取分页的产品列表。
• 我们使用组件的 data 属性 (page 和 limit) 构建 API 请求 URL。
• 我们向 Vuex 存储提交一个突变 (products/addProducts)，将获取到的产品添加到现有的产品列表中。
• loadMore 方法会递增 page 数，然后调用 $fetch() 重新运行 fetch 钩子，加载下一页的产品。
• 这展示了如何使用 fetch 实现无限滚动或分页等功能。

练习：为评论区实现 fetch

构建一个组件，用于显示博客文章的评论列表。使用 fetch 从模拟 API 获取评论，并将它们存储在 Vuex 存储中。允许用户添加新评论（你不需要实现实际的添加评论 API 调用，只需通过将新评论添加到 Vuex 存储中来模拟它）。

asyncData 与 fetch：关键差异及何时使用哪个

特性	asyncData	fetch
目的	获取初始页面渲染数据	获取数据并填充 Vuex 存储
返回值	必需（数据合并到组件数据中）	无需（会修改 Vuex 存储）
这个上下文	不可用	可用
数据存储	组件数据	Vuex 存储
SSR	是	是
应用场景	SEO 关键数据，初始视图数据	跨组件共享的数据，复杂状态

何时使用 asyncData：

• 当你需要获取对页面初始渲染至关重要的数据，并希望它包含在服务器渲染的 HTML 中以用于 SEO 目的时。
• 当数据仅特定于单个组件，且不需要在多个组件之间共享时。
• 当你不需要在数据获取期间访问组件的 this 上下文时。

何时使用 fetch：

• 当你需要获取将被多个组件使用的数据，并希望将其管理在 Vuex 的中央存储中时。
• 当你需要在数据获取期间访问组件的 this 上下文（例如，访问组件数据或方法）时。
• 当你正在构建一个具有共享状态且需要在客户端和服务器之间一致管理状态的更复杂的应用程序时。

假设情景：

想象你正在构建一个社交媒体平台。

• 对于用户的个人资料页面，你会使用 asyncData 来获取用户的基本信息（姓名、头像、简介），并在服务器上渲染以利于 SEO。
• 对于在多个页面显示且频繁更新的新闻动态，您应使用 fetch 获取最新帖子，并将其存储在 Vuex 存储中，以便不同组件可以访问和更新动态。