Utilisation de Mixins dans Vue.js

Dans cet article, nous allons explorer ce que sont les mixins et comment ils peuvent nous aider dans Vue.

Les mixins Vue vous aident à stocker la logique qui doit être réutilisée dans les composants afin que vous n’ayez pas à répéter la logique, ce qui se traduit par un code plus propre et plus efficace. Nous examinerons de plus près comment ils fonctionnent et à quel point ils peuvent être utiles.

Avant de commencer

Vous aurez besoin des éléments suivants installés sur votre machine :

• Noeud .js
• Un éditeur de code : Visual Studio Code est fortement recommandé (Voici pourquoi)
• Vue CLI 3.0

Commencer

Nous utiliserons l’outil Vue GUI pour créer une nouvelle application. Si vous avez suivi ce post depuis le début, vous devriez avoir VS Code ouvert maintenant. Ouvrez un nouveau terminal dans VS Code et exécutez la commande ci-dessous pour ouvrir le client Vue GUI.

vue ui

Voici l’écran que vous verrez :

Cliquez sur le bouton d’accueil en bas de page pour accéder à la page des projets.

Ici, choisissez un dossier de choix dans lequel vous souhaitez que le nouveau projet Vue soit créé et cliquez sur « Créer un nouveau projet ici ».

Appelez le nouveau projet « mixins » et cliquez sur Suivant.

Suivez l’invite et choisissez « Préréglage par défaut ». Donnez-lui quelques minutes et vous serez averti que votre application est maintenant construite avec succès.

Assurez-vous d’exécuter cette commande dans le nouveau projet :

npm install

Vous pouvez maintenant exécuter l’application dans la barre des tâches ou utiliser la CLI pour l’exécuter :

npm run serve

Il devrait afficher l’échafaudage d’un modèle d’application Vue.js dans votre navigateur.

Pour nettoyer l’application pour notre usage, accédez au fichier app.vue et remplacez le contenu par le bloc de code ci-dessous :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Welcome to your Vue app</h1>
  </div>
</template>
<script>
export default {
  name: 'app',
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

La question de la réutilisabilité

Lorsque divers composants de votre application partagent des fonctionnalités similaires, vous devez normalement répéter la logique de cette fonctionnalité dans chaque composant. C’est une façon tellement inefficace de construire du code et cela consomme beaucoup de ressources. L’équipe Vue a créé des mixins pour résoudre ce problème. Voyons comment cela fonctionne avant et après l’introduction des mixins.

Avant l’existence des Mixins

Créons deux composants Vue distincts et partageons-les avec une fonctionnalité similaire. Ouvrez votre dossier racine Vue et naviguez dans le dossier des composants, supprimez le composant HelloWorld, puis créez deux fichiers : les composants multiples.vue et more.vue.

Dans le composant multiples.vue, copiez le bloc de code ci-dessous :

<template>
  <div> 
    <div> {{ counter }} </div>
    <button v-on:click="clicked(2)">
      Click to Multiply by 2
    </button>
  </div>
</template>
<script>
export default {
  data(){
      return {
          counter:1,
      }
  },
  methods: {
    clicked(value) {
      this.counter *= value
    }
  }
};
</script>

Voici un composant simple affichant un bouton qui, lorsqu’il est cliqué, affiche le nombre multiplié par 2. Le compteur est initialisé avec la valeur de 1 et une méthode simple pour gérer l’événement click.

Dans le fichier More.vue, collez le bloc de code ci-dessous :

<template>
  <div> 
    <div> {{ counter }} </div>
    <button v-on:click="clicked(3)">
      Click to Multiply by 3
    </button>
  </div>
</template>
<script>
export default {
  data(){
      return {
          counter:1,
      }
  },
  methods: {
    clicked(value) {
      this.counter *= value
    }
  }
};
</script>

Nous faisons exactement la même chose avec ce composant sauf que l’affichage est multiplié par 3 cette fois. Enregistrez tous vos fichiers et exécutez l’application sur votre serveur de développement dans le terminal VS Code :

npm run serve

Que sont les mixins dans Vue ?

Les mixins Vue sont un moyen de s’assurer que vous n’avez pas à vous répéter comme nous venons de le faire. Ils fournissent un endroit sûr pour stocker la logique où vous pouvez facilement importer et réutiliser les composants dont vous avez besoin.

Syntaxe Mixin

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() 

Créons maintenant un mixin pour la méthode que nous avons utilisée pour le compteur. Créez un fichier JS dans votre dossier racine appelé mixin.js et, à l’intérieur de celui-ci, copiez-y le côté script comme ceci :

export default {
    data(){
        return {
            counter:1,
        }
    },
    methods: {
      clicked(value) {
        this.counter *= value
      }
    }
  };

Enlevez la logique répétée

La prochaine chose à faire est de supprimer la logique répétée des composants Multiples et More et d’importer le fichier Mixins. Votre composant More.vue devrait ressembler à ceci :

<template>
  <div> 
    <div> {{ counter }} </div>
    <button v-on:click="clicked(2)">
      Click to Multiply by 2
    </button>
  </div>
</template>
<script>
import mixin from "/mixin";
export default {
  mixins: [mixin]
};
</script>

Ici, nous avons également enregistré le mixin en tant que tableau, comme Vue Docs l’a prescrit. Faites de même pour le fichier du composant Multiples.

Maintenant, si vous enregistrez tous les fichiers, vous verrez que tout fonctionne comme il se doit. Nous avons maintenant isolé la logique réutilisable en tant que mixin et rendu notre projet plus efficace dans le processus tout en suivant le principe DRY de manière appropriée.

Mixins globaux

Les types de mixins que nous venons de voir sont appelés mixins locaux, ceux qui sont utilisés par composant. Vue vous permet également de créer et de définir des mixins globalement, puis ils peuvent affecter tous les fichiers et composants de votre projet par défaut.

Vous devez faire attention à deux choses :

1. Ils doivent être définis comme ceci avant l’instruction render dans le fichier main.js :

Vue.mixin({ mounted() { clicked(value) {
 this.counter *= value
  }
}});

2. Les mixins globaux ne doivent pas être utilisés sauf en cas d’absolue nécessité.

Conclusion

Aujourd’hui, nous avons examiné les mixins dans Vue.js, pourquoi ils sont si importants et comment ils sont utilisés dans notre flux de travail. Notez que Vue s’assure que les mixins ont priorité sur les fonctions de composant dans le cas où les mixins et les fonctions de composant portent le même nom. Bon piratage !