3. Méthodes & données

Présentation

Au sein de vos composants, il est possible de définir des méthodes, ainsi que de stocker des données (data) qui serviront au fonctionnement interne de votre composant.

Dans le chapitre précédent, nous avons vu comment créer des props, qui sont des variables dont la valeur peut être fournie par le composant parent. Nous allons dans ce chapitre voir comment déclarer une méthode qui nous servira à récupérer les données de notre API. Puis, cette méthode stockera les informations récupérées comme une donnée de notre composant, dont cette fois la valeur ne pourra pas être fournie par le composant parent.

Déclaration de méthodes

Dans la configuration de notre component, il nous est possible de définir des méthodes dans le champ methods :

<script>
export default {
  ...
  methods: {
      doStuff() {
          let data = foo()
      }
  }
}
</script>

Dans notre projet, nous avons déjà déclaré dans un fichier src/services/api/dogsRepository.js, une fonction getDogsData(). Cette fonction ne prend aucun argument et retourne des informations sur les chiens de notre chenil, dont celles présentées sur notre site. Les informations retrouvées sont présentées sous cette forme :

[
   {"id":45, "name":"Pluto", "breed":"Saint-Hubert", "picture":"https://my-best-kennel.com/pictures/45.png", ...},
   {"id":46, "name":"Rex", "breed":"Labrador", "picture":"https://my-best-kennel.com/pictures/46.png", ...},
   ...
]

Nous allons donc importer cette fonction dans notre composant DogGallery et l’appeler au sein de notre nouvelle méthode. Attention toutefois : notre fonction getDogsData() fait appel à un serveur distant pour récupérer les informations qu’elle nous fournit. Il s’agit donc d’une fonction asynchrone.

TIP

📖 Pour plus d’informations sur l’asynchrone en Javascript et la façon de récupérer des données auprès d’un serveur distant, vous pouvez consulter l'annexe de cours sur le sujet.

Nous devons veiller à prendre cela en compte, en rendant notre méthode asynchrone elle aussi :

<script>
...
import getDogsData from '@/services/api/dogsRepository.js'

export default {
  name: 'DogsGallery',
  ...
  methods: {
    async retrieveDogsData() {
      const myData = await getDogsData()
    }
  }
}
</script>

INFO

👌 Vue.js définit via Vite un alias qui nous permet en indiquant @ dans un chemin de fichier de pointer sur le dossier src de notre projet.

Nous avons maintenant une méthode qui récupère nos données d’API dans notre composant et les stocke dans une variable. Mais il s’agit pour le moment d’une variable locale. Nous ne pouvons donc pas l’utiliser dans notre partie template comme nous l’avons fait pour nos props auparavant.

Ce dont nous avons besoin maintenant c’est de données rattachées à l’ensemble de notre composant.

Utilisation de données

Déclaration d’une donnée

Pour déclarer une donnée dans notre composant, il faut l’ajouter dans sa configuration sous la forme d’une méthode data(), comme ceci :

<script>
...
import getDogsData from '@/services/api/dogsRepository.js'

export default {
  name: 'DogsGallery',
  ...
  data() {
    return {
      dogsData: []
    }
  },
  methods: {...}
}
</script>

Vous pouvez déclarer autant de données que vous voulez, et les retourner ensemble sous la forme d’un objet dans votre fonction data(). Pour chaque donnée, vous devrez lui définir une valeur par défaut. Ici, nous indiquons que notre attribut dogsData sera par défaut un tableau vide.

Appel d’une donnée

Dans un méthode

Dans notre méthode, nous pouvons maintenant accéder à cette donnée, comme nous le ferions dans un objet, avec le mot-clé this :

<script>
...
import getDogsData from '@/services/api/dogsRepository.js'

export default {
  name: 'DogsGallery',
  ...
  data() {
    return {
      dogsData: []
    }
  },
  methods: {
      async retrieveDogsData() {
          this.dogsData = await getDogsData()
      }
  }
}
</script>

Dans la balise template

Nous avons maintenant une méthode qui ajoute directement les informations sur nos chiens dans une donnée du composant. Il nous est possible d’exploiter ces données dans notre partie template, comme nous le faisions déjà avec nos props :

<div class="dogs-gallery">
    <DogCard :firstname="dogsData[0].name" :breed="dogsData[0].breed" :pictureUrl="dogsData[0].picture"/>
    <DogCard :firstname="dogsData[1].name" :breed="dogsData[1].breed" :pictureUrl="dogsData[1].picture"/>
</div>

Dans la balise style

Depuis la version 3 de Vue.js, il vous est également possible de vous référer à des données dans la balise style de vos composants grâce à la fonction v-bind(). Vous indiquez en premier argument de la fonction le nom de la donnée à considérer, et elle s’appliquera dans la feuille de style.

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

Si la valeur de la donnée change, la feuille de style s’actualisera en conséquence.

Conclusion

Nous avons bien défini notre méthode, toutefois notre code ne fonctionne toujours pas. En effet, pour le moment nous ne faisons pas appel à notre méthode dans notre composant. Les données de notre API ne sont donc pas récupérées et notre donnée dogsData reste un tableau vide, ce qui provoque une erreur.

Ce que nous aimerions, c’est pouvoir appeler notre méthode au moment de la création de notre composant DogsGallery. Pour cela, il va falloir nous intéresser au cycle de vie de nos composants.

Aller plus loin

• Sur les données et méthodes :
  • La documentation sur les données et les méthodes
  • La documentation sur le v-bind() en CSS
  • Openclassrooms