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: