web-dev-qa-db-fra.com

Différence entre Asyncdata et Fetch

Quelle est la différence exacte entre l'extraction et les données asynchrones. La documentation officielle dit ce qui suit:

asyncData

Vous souhaiterez peut-être récupérer des données et les rendre côté serveur. Nuxt.js ajoute une méthode asyncData qui vous permet de gérer les opérations asynchrones avant de définir les données du composant.

asyncData est appelé à chaque fois avant de charger le composant (uniquement pour les composants de page). Il peut être appelé du côté serveur ou avant de naviguer vers l'itinéraire correspondant. Cette méthode reçoit l'objet contextuel comme premier argument, vous pouvez l'utiliser pour récupérer des données et renvoyer les données du composant.

Récupérer

La méthode fetch est utilisée pour remplir le magasin avant de rendre la page, c'est comme la méthode asyncData sauf qu'elle ne définit pas les données du composant. La méthode fetch, si elle est définie, est appelée à chaque fois avant de charger le composant (uniquement pour les composants de page). Il peut être appelé du côté serveur ou avant de naviguer vers l'itinéraire correspondant.

La méthode fetch reçoit l'objet contextuel comme premier argument, nous pouvons l'utiliser pour récupérer des données et remplir le magasin. Pour rendre la méthode d'extraction asynchrone, renvoyez une promesse, nuxt.js attendra que la promesse soit résolue avant de rendre le composant.

La récupération a été utilisée pour remplir le magasin de données? Mais dans asyncData, est-il également possible de valider via un magasin? Je ne comprends pas pourquoi il existe deux méthodes.

Les deux méthodes s'exécutent côté serveur lors du chargement initial, après quoi, lorsque vous naviguez dans l'application, il s'exécute côté client.

Quelqu'un peut-il m'expliquer l'avantage d'utiliser ces méthodes au-dessus des autres?

Merci pour l'aide.

vue.jsvuejs2vuexnuxt.js
20
Yakalent

Permettez-moi de réitérer quelques points comme prétexte à ce que je vais dire

  • asyncData peut définir des objets de niveau composant et accéder au magasin vuex
  • fetch ne peut pas définir d'objets de niveau composant mais a accès au magasin vuex
  • asyncData et fetch seront déclenchés côté serveur lors du chargement initial
  • Après le chargement initial, asyncData et fetch seront déclenchés lorsque les itinéraires de page correspondants seront invoqués

1) si votre conception est

  • Utiliser vuex store comme référentiel central
  • Accéder aux données du magasin vuex pour l'ensemble de l'application

puis use fetch

2) si votre conception est

  • Utiliser vuex store comme référentiel central
  • Avoir des options pour définir des objets de niveau composant
  • Les données extraites dans un itinéraire particulier ne sont utilisées que par un seul composant
  • Besoin de flexibilité pour avoir la permission de stocker vuex ou de définir un objet de niveau composant

puis use asyncData

Quelqu'un peut-il m'expliquer l'avantage d'utiliser ces méthodes au-dessus des autres?

je ne vois aucun inconvénient à utiliser asyncData ou fetch

Le choix de asyncData ou fetch dépend entièrement de votre architecture

48
divine

Je voudrais souligner un point que je ne vois pas mentionné ci-dessus (du moins, pas clairement). asyncData fusionne automatiquement les données dans l'objet data () de votre page. Fetch ne fonctionne pas. Avec fetch, c'est à vous de faire les données à votre guise.

1
kp123

I. fetch et asyncData sont traités côté serveur.

II. peut voir la différence dans la façon de les utiliser:

a) fetch: changer les données du magasin

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

b) asyncData: changer le contexte (données des composants)

<script>
export default {
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
</script>
0
HoangYell