web-dev-qa-db-fra.com

Data () VS asyncData () dans Nuxt & vue

data() et async data() donne le même résultat (et il est évident que les résultats de asyncData() écrasent les résultats de data())

et les deux entraînent un code HTML dans le code source (c'est-à-dire le code rendu côté serveur)

les deux peuvent également être utilisés pour "await" les données à récupérer (ex: en utilisant axios)

alors, quelle est la différence entre eux?

<template>
  <div>
    <div>test:  {{test}}</div>
    <div>test2: {{test2}}</div>
    <div>test2: {{test3}}</div>
    <div>test2: {{test4}}</div>
  </div>
</template>

<script>
export default {
    asyncData(app){
    return {test:"asyncData",test2:"asyncData2",test3:"asyncData3"}
  },data(){
    return {test:"data",test2:"data2",test4:"data4"}
 }
}
</script>

résultat:

test:  asyncData
test2: asyncData2
test2: asyncData3
test2: data4
vue.jsvuejs2vuexnuxt.jsnuxt
4
xx yy

La réponse la plus simple est que data () est traitée côté client, cependant la section asyncData () est traitée côté serveur lors de l'appel à Nuxt () et une fois de plus côté client.

Le plus grand avantage de nuxt est sa capacité à afficher du contenu côté serveur. Si vous chargez votre contenu en utilisant promesse du côté client, dites par exemple dans la section montée:

data() {
  return {
    products: []
  }
},

mounted() {
  axios.get('/api/v1/products').then(response => {
    this.products = response.data
  })
}

le code javascript est envoyé au client tel quel et le navigateur est responsable de l'exécution de la promesse de récupérer les données de l'API. Cependant, si vous mettez la promesse dans asyncData:

asyncData() {
  return axios.get('/api/v1/products').then(response => {
    // Note that you can't access the `this` instance inside asyncData
    // this.products = response.data
    let products = response.data
    return { products } // equivalent to { products: products }
  })
}

La récupération des données se fait côté serveur et le résultat est pré-rendu et un html avec les données (rendues dedans) est envoyé au client. Donc, dans ce cas, le client ne recevra pas le code javascript pour traiter lui-même l'appel api, mais à la place, il recevra quelque chose comme ceci:

<ul>
  <li>
    <a href="#">Product 1</a>
  </li>
  <li>
    <a href="#">Product 2</a>
  </li>
  <li>
    <a href="#">Product 3</a>
  </li>
</ul>

Le résultat que nous renvoyons de asyncData est fusionné avec ce qui se trouve dans les données. Il n'est pas remplacé mais fusionné.

14
Merhawi Fissehaye

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 le composant data.

asyncData est appelé à chaque fois avant de charger le composant page et n'est disponible que pour cela. Il sera appelé une fois côté serveur (lors de la première demande à l'application Nuxt) et côté client lors de la navigation vers d'autres itinéraires. Cette méthode reçoit l'objet context comme premier argument, vous pouvez l'utiliser pour récupérer des données et renvoyer les données du composant.

Le résultat de asyncData sera fusionné avec les données.

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
3
Ismoil Shifoev