Je veux charger et remplir les données pour chaque composant dans vue.js (nuxt.js)

Question

Je démarre le projet comme suit.

vue init nuxt/express 

mon répertoire est ...

components 
|- slider.vue 
|- list.vue 
pages 
|- index.vue 

et des composants est,

index.vue

<template> 
    <my-slider/> 
    <my-list/> 
</template> 
<script> 
import MySlider from '~components/slider' 
import MyList from '~components/list' 
export default { 
    components: { 
    MySlider, 
    MyList 
    }, 
    asyncData() { 
    ... axios get ... 
    return { 
     img: response.data.img 
    } 
    } 
} 
</script> 

Je mis en place la structure suivante.

Si un GET/demande se produit,

Je veux importer des données à partir de la base de données dans chaque composant (mySlider, MyList).

1. Chaque composant (MySlider, MyList) doit-il effectuer une requête axios depuis asyncData()? Dois-je faire une requête axios à partir du composant d'index asyncData()?
2. Comment définir les données pour initialiser les données de réponse axios après la demande?

Answer 1

Vous décidez comment configurer vos données. Si vous utilisez les mêmes données dans les deux sous-composants, je les récupère du composant parent et les envoie aux composants MySlider et MyList à l'aide des propriétés.

Si les données des deux composants n'ont rien à voir l'une avec l'autre, j'essaierais probablement de garder ces composants aussi lâchement couplés que possible, et de les amener à aller chercher leurs données quand ils en ont besoin. Jetez un oeil aux hooks de cycle de vie de VueJS pour voir comment vous pouvez vous connecter à n'importe quel événement de cycle de vie qui se passe sur votre composant; ces crochets vous permettent d'aller chercher vos données dès que cela est nécessaire (lire: dès que votre composant est créé/monté/ce que vous désirez): https://vuejs.org/v2/api/#Options-Lifecycle-Hooks