Vue / Nuxt.js - 在创建的钩子中调用两次 API

Question

我目前正在使用 Nuxt.js 进行开发，并且像大多数初学者一样，我想知道最好的生命周期挂钩来进行 API 调用。我发现的许多资源（与下面的资源非常相似）指出，created() 挂钩是在加载所有内容之前从 API 获取数据的最佳位置。

Difference between the created and mounted events in Vue.js

当我在开发人员选项的网络选项卡上注意到我的 created() 挂钩中的 API 被调用两次时，我的问题就出现了。在进一步研究之后，它指出这个钩子在服务器端和客户端运行。我注意到mounted() 只在客户端运行，所以我正在学习如何使用该钩子。然而，我确实注意到我可以在created() 钩子中使用一些if 逻辑（如果 process.server）仅在客户端/服务器上运行，而不是同时在两者上运行。这是一个常见的解决方案吗？

为了进一步澄清我的问题，如果created() 在服务器端和客户端都运行，为什么要将我的 API 调用放在这个钩子中？

Answer 1

虽然created 可能是 Vue 应用程序的合适钩子，但 Nuxt 提供了更适合获取数据的其他钩子。如果您只需要在服务器端进行提取，则需要在挂钩中使用if(process.server) 包装调用。

fetch hook

1. 在创建组件实例后在服务器端渲染期间调用，在客户端导航时调用，但server-side fetch can be disabled 和fetchOnServer: false。
2. 适用于所有 Vue 组件
3. this 上下文可用
4. 简单地改变本地数据
5. 通过$fetchState.pending和$fetchState.error公开数据加载状态，并允许使用$fetch()手动调用fetch钩子

示例用法：

export default {
  data() {
    return {
      todos: []
    }
  },
  async fetch() {
    const { data } = await axios.get(
      `https://jsonplaceholder.typicode.com/todos`
    )
    // `todos` has to be declared in data()
    this.todos = data
  }
}

asyncData hook

1. 在创建组件实例之前调用
2. 仅限于页面级组件
3. this 上下文不可用
4. 通过返回数据添加有效负载

示例用法：

export default {
  async asyncData(context) {
    const data = await context.$axios.$get(
      `https://jsonplaceholder.typicode.com/todos`
    )
    // `todos` does not have to be declared in data()
    return { todos: data.Item }
    // `todos` is merged with local data
  }
}