Créer une application de liste d'achats avec l'API Vue Composition

Cet article montre comment l'API Vue Composition est un excellent moyen de rendre votre code plus lisible et maintenable. Avec l'API de composition introduite dans Vue 3, la gestion des méthodes et de l'état des composants est rendue plus accessible.

L'API de composition est une nouvelle manière optionnelle de créer et d'organiser des composants dans une application Vue 3. Il permet de définir plus intuitivement la logique des composants réactifs en permettant de regrouper tout le code d'une fonction spécifique (recherche, par exemple). L'utilisation de l'API Vue Composition rendra votre application plus évolutive et réutilisable entre plusieurs composants.

Dans cet article, nous allons créer une application de liste d'achats simple avec l'API Vue Composition.

Vous pouvez consulter une démo en direct de l'application que nous construisons .

Prérequis

Pour ce didacticiel, vous aurez besoin:

• d'un élément de base compréhension de HTML, CSS, JavaScript et Vue
• un éditeur de texte
• un navigateur Web
• Node.js
• Vue CLI

Configuration de l'application Vue

Commençons maintenant par installer Vue Cli:

 npm install -g vue-cli

Cette commande installera Vue globalement.

Nous utiliserons la CLI Vue pour créer une application simple. Pour ce faire, ouvrez votre terminal et tapez ce qui suit:

 vue create vueshoppinglist

Après l'installation, déplacez-vous dans le dossier à l'aide de la cd vueshoppinglist et exécutez npm run serve .

Cela démarre un serveur de développement qui vous permet d'afficher votre application sur localhost: 8080 .

Il est maintenant temps de configurer un joli projet Vue.

L'API de composition Vue

Pour installer le API de composition à partir de la racine de votre projet, exécutez ce qui suit:

 npm install --save @ vue / composition-api

Une fois l'installation réussie, nous l'importerons dans notre projet.

Modifiez src / main.vue pour enregistrer l'API Composition globalement dans notre application, afin que nous puissions l'utiliser dans tous nos composants de l'application:

 importer Vue depuis 'vue'
importer l'application depuis './App.vue'
importer VueCompositionApi depuis '@ vue / composition-api'
Vue.config.productionTip = false
Vue.use (VueCompositionApi)
nouvelle Vue ({
  rendu: h => h (App),
}). $ mount ('# application')

Développement de l'interface utilisateur

Nous aurons besoin d'un composant qui hébergera l'interface utilisateur de notre application. Créez un nouveau composant ShoppingList.vue dans le répertoire src / components / et collez ce qui suit dans le fichier:

L'extrait de code ci-dessus est le passe-partout initial de notre interface utilisateur. Nous allons maintenant importer notre nouveau composant ShoppingList.vue vers App.vue comme indiqué ci-dessous:

Utilisation de l'API de composition Vue

Commençons par importer l'API de composition dans notre composant ShoppingList.Vue :

Ici, nous importons réactif de l'API Vue Composition.

Nous allons maintenant ajouter des écouteurs d'événements à l'application en modifiant notre modèle comme suit:

Vue 3 utilise les options data et pour définir l'état et ajouter des fonctions plutôt que d'accéder à une méthode setup . Cette méthode est appelée après le hook de cycle de vie beforeCreate et avant create .

Nous allons maintenant déclarer la variable state et les méthodes dans la méthode de configuration, comme indiqué ci-dessous:

Après avoir déclaré les variables et les méthodes, nous devons définir l'état de notre composant:

L'état ici est limité à la fonction ItemList . Nous définissons notre état d'entrée que nous lierons à notre champ d'entrée et définissons également notre tableau Items qui contiendra tous nos Items .

Définissons notre fonction addItem :

La fonctionnalité d'ajout prendra les données dans le champ d'entrée et les poussera dans le tableau Items en utilisant la méthode push.

Implémentons la suppression d'un élément. Nous obtiendrons l'index de l'élément puis supprimerons l'élément du tableau des utilisateurs en utilisant la méthode d'épissure:

Il est important que tout ce à quoi nous voulons pouvoir accéder à partir du modèle soit renvoyé par les méthodes itemList et setup () . À la fin de l'extrait de code, nous retournons l'état ou la méthode.

Notre application de liste de courses est maintenant terminée:

Conclusion

Enfin, nous 'ai créé notre application Shopping List avec l'API de composition Vue 3. Il est intéressant de voir comment l'API Composition est utilisée dans Vue 2. L'un de ses principaux avantages que j'ai observés est la gestion des méthodes, et l'état des composants est rendu plus accessible ainsi que sa réactivité.

J'espère que vous en avez appris quelques-uns. choses à propos de Vue. Contactez-moi sur Twitter si vous avez des questions ou des commentaires.

Et n'hésitez pas à ajouter de nouvelles fonctionnalités à l'application, car c'est un excellent moyen d'apprendre. Vous pouvez consulter le code source ici .