J'ai actuellement 2 composants qui sont presque identiques les uns aux autres. La structure HTML et les règles CSS sont identiques et la seule différence est que sur Donc, ma question est donc, suis-je censé fusionner ces 2 composants en 1 composant? Si je devais faire cela, comment puis-je déterminer si je dois faire la demande d'obtenir des lieux visités ou des lieux de liste de souhaits? Peut-être basé sur l'URL? Si l'URL est Quel nom serait approprié pour ce composant car il sera utilisé pour obtenir des lieux visités et des lieux de liste de souhaits? En outre, quel serait un nom approprié pour la propriété de données qui remplacera la liste de souhaits wishlelist.vue visit.vue monté () de ces composants, une demande d'obtention différente est faite. On obtient tous les endroits visités et on obtient tout lieu de liste de souhaits. La réponse à la fois à la demande d'obtention a la même structure, il renvoie simplement différents endroits basés sur ce que l'utilisateur a visité ou la liste de souhaits. http: // localhost: 8080 / # / admin / visité exécutez la demande d'obtention qui obtient tous les lieux visités et si c'est http: // localhost: 8080 / # / adminhost / Liste d'envies Obtenez les lieux de liste de souhaits? et visité ?
3 Réponses :
Séparer obtenir les données d'affichage des données. Le parent peut ensuite effectuer les deux demandes dans son monté / créé Code> Crochet et transmettez-les comme un accéder au composant d'affichage: <places :places="visited"/>
<places :places="whishlist"/>
Vous semblez avoir négligé le fait que les deux réponses ont une structure différente. Cela doit également être refactored.
@Andreigheorghiu citation de la question initiale "La réponse à la demande d'obtention a la même structure" ¯_ (ツ) _ / ¯
Oui, vous devez faire un composant réutilisable, probablement appelé Votre composant doit prendre le paramètre source, le long de ces lignes: et mappez-le comme: pendant que votre getter devrait quelque chose comme: Vous devez évidemment refactoriser tous les endroits où vous utilisez maintenant lieux.vue . Toutefois, votre résultat renvoyé doit avoir la même structure (vous devez renommer Wishlistplaces et visites de visiteurs à lieux , probablement. Ou Sights " / Code>): wishlist ou ou visité accessoires / méthodes à utiliser lieux (ou Sights , si c'est votre choix).
Où puis-je trouver ce qu'est la source = "getwishlist" dans la documentation? Malheureusement, la réponse ne fait pas trop de sens pour moi en ce moment à cause de cela.
ici . C'est un prop . Vous pouvez le transmettre directement sous la forme d'une chaîne monté () comme this.source dans axios.get (`/ $ {this.source} / $ {Ceci. Nom d'utilisateur} `)
Oh je vois, merci. Je pense que cela fonctionnera bien.
Aussi il n'est pas nécessaire d'être appelé source droite? Ça peut être ce que je veux?
Oui, vous pouvez appeler cela ce que vous voulez. Si c'est un multit terme. Comme "Ceci est mon paramètre Funky" Vous devez utiliser Kebabcase pour l'attribut: / Code>: Thisismyfunkyparam: {...} . Il est possible d'utiliser Kebabcase dans des accessoires, si vous passez la clé sous forme de chaîne: 'this-is-my-funky-param': {...} , mais vous ne voulez pas vraiment Utilisez-le comme Ceci ['this-is-my-funky-param'] à l'intérieur de votre VM, êtes-vous?
Vous êtes les bienvenus. La chose importante à retenir est la suivante: si le param est préfixé avec un colon: quelque chose sera analysé comme un JavaScript expression. Si vous souhaitez passer dans le 'quelque chose' chaîne, vous pouvez omettre le côlon.
Jetez un coup d'œil à dynamique
Même si vous déclarez que la structure retournée est la même, ce n'est clairement pas. On tire le
lieux dansvisityPlaces et un danssouhaitement desplaces . Vous pouvez a) changer le BE pour toujours renvoyer le même access (c.-à-d. lieux ) ou b) avoir un mapper et une carte basé sur le type Source . Et votre code FE a besoin de refactoring pour utiliser le PROP neutre (probablementlieux ).Je ne m'aurais peut-être pas exprimé correctement. Par "La structure renvoyée est la même", je veux dire que les résultats de la demande d'obtention ont la même structure de propriétés. Les différentes demandes de GET renvoient des endroits différents cependant.
Retour
lieux dans les deux cas et modifie votre composant Fe pour utiliserlieux , qu'ils soient visités ou souhaitent la liste de souhaits. C'est la voie à suivre.