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

Question

我目前在Nuxt开发。和大多数初学者一样，我想知道放置API调用的最佳生命周期挂钩。我找到的许多参考资料（很像下面的参考资料）都指出，created（）hook是在加载所有内容之前从API获取数据的最佳位置。

在Vue.js中创建和挂载事件之间的差异

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

为了进一步澄清我的问题，如果创建（）在服务器端和客户端都运行，为什么要把我的API调用放在这个钩子里？

Answer 1

虽然创建的可能是Vue应用程序的合适挂钩，但Nuxt提供了更适合获取数据的附加挂钩。如果需要仅在服务器端进行提取，则需要在钩子中使用If（process.server）包装调用。

1. 在组件实例创建后的服务器端呈现期间调用，并且在导航时在客户端上调用，但是可以通过felchOnServer： false禁用服务器端读取。
2. 可用于所有Vue组件
3. 这个上下文是可用的
4. 简单地变异本地数据
5. 通过$felchState.pending和$felchState.error公开数据加载状态，并允许手动调用$getch（）

用法示例：

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

1. 在创建组件实例之前调用
2. 仅限于页面级组件
3. 此上下文不可用
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
  }
}