Usines d'API Vue.js Nuxt

Il y a quelque temps, J'ai partagé quelques conseils sur la façon dont vous pouvez créer et maintenir un grand projet Vue.js . L'un d'eux consistait à utiliser des usines d'API (également appelées modules API) pour organiser votre code. Dans cet article, nous allons creuser un peu plus afin que vous puissiez mieux comprendre et utiliser cette structure dans votre travail.

Suivez-vous une convention spéciale pour organiser vos appels d'API dans votre application?

Si vous ne le faites pas… 🤷🏼‍♀‍ Eh bien, vous devez lire ceci! Parce que je crois vraiment que cette structure profitera à votre équipe et à tous vos futurs collègues.

Comment? Les usines d'API faciliteront la compréhension de votre base de code et augmenteront ainsi la productivité de chacun. ⏱

Pourquoi utiliser des usines API dans votre projet

En un mot, les usines API offrent des avantages significatifs aux développeurs qui les utilisent:

• Cette pratique regroupe tous vos terminaux dans un ou plusieurs modules. Ainsi, ils ne sont pas dispersés au hasard dans votre projet et tout le monde peut rapidement avoir un aperçu de chaque point de terminaison utilisé par l'application.

• Lorsque vous modifiez un point de terminaison, vous n'avez qu'à le mettre à jour à un seul endroit. Vous serez plus confiant dans votre code et cela vous évitera de casser votre application.

• Si vous avez besoin de réutiliser vos modules d'API dans plusieurs projets, vous pouvez les empaqueter avec npm.

• En comparant vos itinéraires d'API backend avec vos usines d'API frontend côte à côte, vous pouvez identifier rapidement tous les points de terminaison que vous n'appelez plus. Votre application devient un peu plus facile à maintenir en supprimant tout le code inutilisé.

• Vous pouvez rendre toutes vos usines d'API disponibles de n'importe où dans votre application en définissant une nouvelle propriété dans l'instance Vue . Chaque endpoint sera accessible avec quelque chose comme this. $ Api.myModule.myEndpoint () . (Allez à la fin de l'article – partie 3 – pour en savoir plus sur la façon de procéder correctement avec Vue et Nuxt.)

Voyons comment faire fonctionner les usines API dans notre application.

1. Installation d'Axios

Dans l'exemple suivant, pour Vue.js et Nuxt.js, respectivement, nous utiliserons la bibliothèque Axios pour récupérer notre API.

Voici comment l'installer et la rendre disponible globalement dans votre application :

Vue.js

 npm   install  --save axios vue-axios

 import  Vue  de   "vue" ; 
 import  axios  from   "axios" ; 
 import  ] VueAxios  de   "vue-axios" ; 

Vue .  use  ( VueAxios  axios ) ; 

⚠️ Note : Dans Vue.js, vous pouvez accéder à Axios avec this.axios ou this.http .

Nuxt.js

 npm   install  @ nuxtjs / axios

 module .  exportations  =   {
 modules :   [ "@ nuxtjs / axios" ] 
} ; 

⚠️ Remarque : Dans Nuxt.js, vous pouvez accéder Axios avec this. $ Axios .

2. Rassembler tous vos terminaux dans un ou plusieurs modules

Créez un dossier api (vous pouvez l'appeler comme vous voulez).

Et oui! 🤓Vous l'avez deviné, mon pote: Nous allons stocker tous nos modules API à l'intérieur.

⚠️ Si vous utilisez Vue, cela devrait être dans src . D'autre part, les utilisateurs de Nuxt devront placer ce dossier directement à la racine du projet.

 api
├── auth.js
├── blog.js
├──  .. 
└── settings.js

Chaque module hébergera tous les terminaux associés à sa fonction donnée. 👁‍🗨 Voici à quoi cela pourrait ressembler pour un module auth .

 export   default  axios  =>   ( {
  ForgotPassword  ( email )   {
  return  axios .  post  ( "/ auth / password / oublié"  ,   { email } ) ; 
 } 
 
  login  ( email  password )   {
  return  axios .  post  ( "/ auth / login"   { email  ] mot de passe } ) ; 
 } 

  déconnexion  ()   {
  return  axios .  get  ( "/ auth / logout" ) ; 
 } 

  register  ( payload )   {
  retour n  axios .  post  ( "/ auth / register"  payload ) ; 
 } 
 
  resetPassword  ( password  passwordConfirmation  resetToken )   {
  return  axios .  ] post  ( "/ auth / password / reset"   {
 mot de passe :  mot de passe 
 password_confirmation :  passwordConfirmation 
 jeton :  resetToken
 } ) ; 
 } 
} ) ; 

La chose critique ici est de garder à l'esprit que l'instance axios est passée dans chaque module. 🕺

Bien sûr, vous demandez pourquoi. 🙆‍♀‍ Pour que chaque fonction puisse récupérer le point de terminaison d'API qui lui est associé. De plus, comme il renvoie une promesse, nous pourrons utiliser le mot-clé await lors de leur appel. Rendre vos usines d'API disponibles partout dans votre application

Maintenant que vous avez une meilleure idée de la façon dont vous pouvez créer un module d'API, 😜 voyons comment nous pouvons les rendre disponibles dans toute votre application.

Vue.js [19659123] Commencez par créer un fichier api.js dans votre dossier src et importez tous vos modules API à l'intérieur.

Ensuite, assurez-vous d'importer également Vue afin que vous puissiez transmettre l'instance Axios à chaque usine (comme expliqué ci-dessus).

 import  Vue  from   "vue" ; 
 import  Auth  depuis   "@ / api / auth" ; 
 import  Blog  depuis   "@ / api / blog" ; 
 import  Paramètres  de   "@ / api / settings" ; 


 const  factories  =   {
 auth :   Auth  ( Vue .  axios ) 
 blog :   Blog  ( Vue .  axios ) 
 paramètres :   Paramètres  ( Vue .  axios ) 
} ; 



Vue .  $ api  =  usines ; 

Enfin, importez le api.js dans votre fichier main.js .

 import  Vue  de   "vue"  ; 
 import  axios  de   "axios" ; 
 import  VueAxios  de   "vue-axios" ; 


 import   "@ / api.js" ; 

Vue .  use  ( VueAxios  axios ) ; 

⚠️ Parce que Nuxt.js peut également exécuter du code côté serveur, le processus est un peu différent de celui d'une application Vue standard.

Nuxt.js

👩🏼‍🏫 Si vous n'êtes pas familier avec ce qu'est une injection combinée avec Nuxt, je vous suggère de lire cette partie de la documentation avant d'aller plus loin. 📚

Mais parce que je suis gentil, 👼 Je vais toujours vous dire ce que c'est. En un mot, une injection combinée vous permet d'accéder à n'importe quelle fonction à l'intérieur de n'importe lequel de vos composants, (😎attendez-le) ainsi qu'à l'intérieur de vos modules Vuex (ce qui sera vraiment pratique dans vos répartiteurs). pour fonctionner, cependant, nous devons créer un plugin. 🔧

 import  Auth  from   "@ / api / auth" ; 
 import  Blog  from   "@ / api / blog" [19659022]; 
 import  Settings  from   "@ / api / settings" ; 

 export   default   ( context  inject )   =>   {
 
  const  usines  =   {
 auth :   Auth  ( context .  $ axios ) 
 blog :   Blog  ( context .  $ axios ) 
 settings :   Settings  ( context .  $ axios ) 
 } ; 

 
  inject  ( " api " usines ) ; 
} ; 

Et maintenant, il ne vous reste plus qu'à enregistrer le plugin comme tout autre que vous utiliseriez. ⚠️ Mais assurez-vous de ne pas le limiter au mode client.

 module .  exports  =   {
 plugins :   [ { src :   "@ / plugins / api.js"  } ] 
} ; [19659213] 4. Comment utiliser vos usines API maintenant 
 Félicitations, nous avons réussi! 🎊 
 Maintenant, voici un exemple de la façon dont nous pouvons enregistrer la réponse dans notre application. 
 < template > 
  < div > 
  < input   v-model  =  " email "    type  =  " text "    placeholder  =  " email "    />   < input   v-model  =  " password "    type  =  " password "   placeholder  =  " mot de passe  "   />   < bouton   @click  = "  onLogin  " > [19659247] Bouton de connexion  </  >   </  div >   </  modèle >   < script >    export   default   {  data  ()   {  return   { courriel :   ""  mot de passe :   ""  } ;  }  méthodes :   {  async   onLogin  ()   {  const  response  =   wait   this [19659022].  $ api .  auth .  login  ( this .  email   this  ].  mot de passe ) ;  console .  log  ( response ) ;  }  }  } ;    </  script >   

😋J'espère que cette structure vous aidera à mieux organiser vos appels d'API dans votre prochain projet. Je l'utilise dans chacun de mes projets clients, et je n'ai jamais eu de problème avec.

Si vous avez des questions ou même une suggestion pour améliorer cette structure, 🙏 n'hésitez pas à me le faire savoir dans les commentaires ou sur Twitter @RifkiNada . 😉