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

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

Vue.js 中创建事件和挂载事件的区别

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

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

解答

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

fetch挂钩

1. 组件实例创建后服务端渲染时调用,客户端导航时调用,但服务端获取可以禁用和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挂钩

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
  }
}