PC & Mobile

Construire une application de pile complète avec Vue.js, GraphQL, Fastify et MongoDB

Construire une application de pile complète avec Vue.js, GraphQL, Fastify et MongoDB


La première chose que nous voulons faire est de naviguer vers le src dossier et mettre à jour le main.js fichier avec le code suivant:

main.js

Dans le code ci-dessus, nous importons plusieurs dépendances, initialisons les bibliothèques, créons le client et le fournisseur Apollo et créons l'instance Vue.

Les liens ci-dessus sont destinés à la documentation générique Apollo mais sont applicables à travers les frameworks. La documentation de Vue Apollo est disponible ici.

Il est également utile d’en savoir plus sur l’instance Vue, en particulier sur les points d’accès au cycle de vie, qui sont très bien expliqués dans cette vidéo.

Ensuite, nous ajoutons le code suivant à la routeur.js fichier:

routeur.js

Ci-dessus, nous importons uniquement les dépendances externes et les fichiers de vue. Ensuite, nous initialisons le routeur et établissons les itinéraires.

Les objets routes se composent du chemin, d'un nom, du composant (vue) et du fait qu'il soit ou non transmis à des accessoires.

Les accessoires sont passés avec la syntaxe suivante:

: id

Vue Router est le routeur officiel de Vue.js. Il s’intègre profondément au cœur de Vue.js pour faciliter la création d’applications à une seule page avec Vue.js.

En savoir plus sur le routage et le Routeur Vue ici.

Mettons à jour le store.js fichier avec le code suivant:

store.js

Dans le code ci-dessus, nous importons les dépendances externes et initialisons Vuex. Nous avons ensuite configuré le magasin Vuex, dans lequel nous spécifions l'état initial de l'application, ainsi que les mutations attendues.

Vuex est un modèle de gestion d'états + une bibliothèque pour les applications Vue.js. Il sert de magasin centralisé pour tous les composants d'une application, avec des règles garantissant que l'état ne peut être muté que de manière prévisible. Il s’intègre également à l’extension officielle devtools de Vue pour fournir des fonctionnalités avancées telles que le débogage sans déplacement dans le temps et l’instantané d’état.

Voici un excellent article qui plonge plus profondément dans Vuex.

Maintenant, mettons à jour leApp.vue fichier en remplaçant le code suivant:

App.vue

Vue Router chargera le même Home.vue en tant que page par défaut car nous avons spécifié la vue d'accueil en tant que page par défaut (/) route.

Nous chargeons le vue du routeur dans notre application avec le code suivant:

Nous déclarons et courons ensuite le CarsQuery qui renverra toutes les voitures de la base de données, puis validera le résultat dans le Magasin Vuex.

Notez que le CarsQuery est exécuté avant le montage du composant, à l'aide du beforeMount () crochet de cycle de vie.

N'hésitez pas à vous connecter le réponse variable à la console ou d’utiliser l’extension Vue dev-tools pour voir la réponse dans notre magasin Vuex.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer