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

关键词：

【中文标题】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
  

【讨论】：

vue生命周期及钩子函数

参考技术A其实生命周期就是指Vue实例创建的过程，从开始到销毁的过程。在这个过程中呢又分:开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列...在这个过程中呐，有一些方法（函数）会被触发执... 查看详情

vue中什么阶段才能调用dom？什么阶段能发起请求？

...t、mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端端返回的数据进行赋值。但是推荐在created钩子函数中调用异步请求，因为在created钩子函数中调用异步请求 查看详情

vue的生命周期

参考技术AVue生命周期分为四个阶段：创建、挂载、更新、销毁。所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。在实例初始化之后，组件创建、数据观测（dataobserver）和event/watc... 查看详情

Nuxt.js - API 调用的最佳场所

】Nuxt.js-API调用的最佳场所【英文标题】：Nuxt.js-ThebestplaceforAPIcalls【发布时间】：2020-12-2021:16:54【问题描述】：我是Vue.jsNuxt和所有前端的新手。我有一个关于API调用的问题。我不确定什么是正确的方法，这里的最佳做法。我有... 查看详情

vue3生命周期钩子以及使用方式

...#xff0c;组件已经完成了其响应式状态的设置，但还没有创建DOM节点。它即将首次执行DOM渲染过程。onMount()DOM挂载完成调用注册一个回调函数，在组件挂载完成后执行。组件在以下情况下被视为已挂载：1.其所有同步子组... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

在 Nuxt JS vuex 中使用 Vue Router 重定向

...se和Vuex来处理身份验证和数据库信息。我在NuxtJS中有一些创建用户、登录和注销用户的操作。我正在尝试在用户成功注册后实现重定向/当他们点击登录时，我的代码是：e 查看详情

你如何等待 vue.js 创建的钩子？

】你如何等待vue.js创建的钩子？【英文标题】：Howdoyouawaitvue.jscreatedhook?【发布时间】：2020-05-0211:56:29【问题描述】：我有一个vue.js应用程序，我需要在其中等待对PrismicAPI的调用。问题是调用从创建的钩子开始，但我不知道如何... 查看详情

Vue/Vuex 在创建的钩子中等待异步调度

】Vue/Vuex在创建的钩子中等待异步调度【英文标题】：Vue/Vuexwaitforasyncdispatchincreatedhook【发布时间】：2021-05-0604:16:12【问题描述】：我无法使从firebase获取数据的函数异步：当组件被创建时，我有：created()this.$store.dispatch("fetchSectio... 查看详情

在 Google Firestore 中处理查询游标的正确方法？ (Vue/Nuxt.js)

】在GoogleFirestore中处理查询游标的正确方法？(Vue/Nuxt.js)【英文标题】：ProperwaytohandleQueryCursorinGoogleFirestore?(Vue/Nuxt.js)【发布时间】：2019-04-1402:15:24【问题描述】：我使用FirebaseFirestore运行一个聊天应用程序，它运行得非常好，但... 查看详情

vue生命周期钩子(代码片段)

　　每个vue实例被创建时都会经历一系列初始化的过程，像是一个生命从无到有的过程，所以叫生命周期，而这个过程都有对应的不同阶段，也就对应了生命周期不同的钩子函数，这些生命周期函数，作为vue实例的属性使用，只... 查看详情

vue基础面试题（3）

...ds、computed以及watch上的数据和方法都不能被访问实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。这里没有nextTick来访问Dom在挂载开始之前被调用：... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

vue组件的生命周期

参考技术A组件实例从创建到销毁，中间会经历几个阶段，如上图所示。1.beforeCreate: 在实例初始化之后，数据观测(data observation)和事件/监听器配置之前被调用。此时Vue实例的挂载元素$el和数据对象data都为undefined,还未初始... 查看详情

nuxt-nuxtserverinit&页面渲染前的store处理&context

...状态持久化，因为vuex刷新后数据会丢失。nuxt项目中created钩子中不存在window对象（localstorage或者cookie的设置需要window对象），比如想要获取登录状态即判断是否存在token时，只能在mounted中进行操作，但这样又会引发一个问题，就... 查看详情

vue生命周期介绍

...和event/watcher时间配置之前被调用。2、created　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。3、beforeMou... 查看详情

vue——生命周期和钩子函数的一些理解

...生命周期钩子函数（简称生命周期函数），指的是组件的创建、更新、销毁三个阶段所触发执行的函数。根据每个阶段触发的钩子函数，我们可以相应的做一些操作，如获取后端接口数据、监听事件、执行事件、执行定时器、移... 查看详情