Créer un composant qui appelle une API pour récupérer les informations

Bonjour,

Je suis un peu bloquer pour la création d’une liste de joueur. Je me base sur les retours d’API fait en PHP avec API-Platform.
Les retours API sont unitaire, c’est à dire que pour les sous-objets, j’ai des URI et non le contenu des sous-objet.
Côté Vue, c’est le Kit Material en VueJs 2 et VueX

Je dois donc avoir un component qui accepte cette URL pour aller chercher des informations supplémentaire.
Ici, par exemple, J’ai une relation Player → Player_Rank → Rank.
Et donc pour afficher la liste des Joueurs et afficher leurs ranks,
Je voulais faire un component Badge qui prends en props ces URL.

Mais je sais pas comment gérer un store avec plusieurs items et d’en avoir besoin que d’un item dans mon component. Je sais pas si vous avez un exemple sur les Internets de ce genre de cas.

En effet, j’ai comme problème la récupération de la valeur d’un props au mounted ou la création d’un getter(vuex) mis en computed avec un argument.

Bref si vous avez des exemples ou des mots clé à chercher de ce genre de comportement, je suis preneur.

Bonne soirée

Mais je sais pas comment gérer un store avec plusieurs items et d’en avoir besoin que d’un item dans mon component. Je sais pas si vous avez un exemple sur les Internets de ce genre de cas.

Tu veux acceder a ton item directement dans ton component, c’est ca? Si tu peux mieux t’expliquer, ce serait bien.

Sinon, tu contactes le store plutot dans le composant parent grace aux mappers (mapState, mapGetters…) puis tu passes les valeurs que le store te retourne, en props, a tes composants.

Un exemple:

// Parent.vue
<template>
  <composant :prop1="valeur1" :prop2="valeur2"/>
</template>
<script lang="js">
import {mapState} from 'vuex'
export default {
  name: 'Parent',
  data: () => {
    // tes donnees de bases ici
  },
computed: {
    ...mapState(['valeur1', 'valeur2']),
  }
}
</script>

Du coup, tu pourrais faire un v-for dans ton cas apres avoir recupere les donnees du store dans le composant parent:

<composant v-for="item,i" :key="i" :prop1="item.valeur" .../>

Du coup, t 'as des donnees en props comme avec la data du component, pas besoin de faire quelque chose dans le hook mounted pour recuperer une quelconque donnee.

Tu peux checker ces articles de la doc aussi:
https://vuex.vuejs.org/guide/state.html#the-mapstate-helper
https://vuejs.org/v2/guide/components-props.html

En esperant que tu trouves une solution, salut :wink:.

NB: Sorry si je mets pas d’accent, j’utilise un clavier anglais.

Merci de ton aide @HansTognon

Alors désolé de la réponse long, je vais exposer tout :stuck_out_tongue:

Alors, j’essaye de faire une liste de joueur:

Voici un différent retour d’API :
https://paste.gg/p/anonymous/1dd2dcdc4e5f46bb80c95f1e7b6e1d48
Le premier est la liste des joueurs
le second est le player rank
le troisième est le rank.

Voici les components
https://paste.gg/p/anonymous/13c1ab4cae6c4510a3c522bfac3efbe1

Voici une tentative de store de rank (sans succès)
https://paste.gg/p/anonymous/e0a353ec458f465aa5c578d28f727b4a

En faite, mon problème de compréhension, c’est comment faire un store pour stocker des plein d’objets différents indexé avec une clé. et de pouvoir les call API/récupérer avec leur id (qui est en clé).

Alors vous allez me dire, c’est pas opti, c’est un développement qui semble très naif. Mais réalité j’utilise un proxy (Vulcain.rocks) qui va puis push les informations en même temps que l’appel initial.

Je reste disponible si vous avez des suggestions ou des demande de précision

Salut,

Pas sûr de comprendre ce qui te bloque.

je verrais bien une clé pour chaque type d’objet dans ton store :

state: {
  players: []
  playerRanks: []
  ranks: []
}

quand tu as l’ID d’un objet, tu parcours la liste d’objet de ce type (en cherchant l’ID en question) et s’il n’est pas dans la liste, tu fais un call API pour récupérer le détail et l’ajouter à la liste.

PS: une raison particulière pour que ton v-for soit sur un <template> (et pas directement sur <player-rank-badge>) ?