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

Posted 2023-02-22

【中文标题】Vue / Nuxt.js - 在创建的钩子中调用两次 API

【英文标题】：Vue / Nuxt.js - APIs being called twice in created hook

【发布时间】：2021-06-24 19:09:09

【问题描述】：

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

Difference between the created and mounted events in Vue.js

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

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

【参考方案1】：

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

fetch hook

在创建组件实例后在服务器端渲染期间调用，在客户端导航时调用，但server-side fetch can be disabled 和fetchOnServer: false。 适用于所有 Vue 组件 this 上下文可用 简单地改变本地数据 通过$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

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

示例用法：

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