Utiliser un fichier Javascript depuis différents composants VueJS


#1

Bonjour,

J’ai plusieurs composants qui utilisent des méthodes identiques.
Je souhaiterais donc simplement centraliser ces méthodes dans un seul fichier javascript et les appeler depuis les composants VueJS, mais je n’ai pas trouver comment faire pour inclure ce fichier javascript et surtout utiliser les fonctions.

Imaginons que j’ai 5 composants vues :

  • composant1.vue
  • composant2.vue
  • composant3.vue
  • composant4.vue
  • composant5.vue

J’ai un fichier Javascript (monfichier.js) avec mes fonctions :

function maFonctionA{ return “A”}
function maFonctionB{ return “B”}
function maFonctionC{ return “C”}

Comment faut-il faire pour que je puisse appeler ces 3 fonctions depuis mes 5 composants ?
Faut-il formater monfichier.js avec une syntaxe particulière ?

J’ai pour le moment fait un copier coller de toutes mes méthodes dans chaque composant, donc c’est pas top…


#2

Salut Fabien,

Il semblerait que tu puisses utiliser une mixin: c’est une façon de pouvoir insuffler plusieurs instances (composantes) Vue avec les mêmes fonctionnalités (méthodes, data, etc).

var mesFonctions = {
  methods: {
    maFonctionA: function() {
      return “A”
    },
    maFonctionB: function() {
      return “B”
    },
    maFonctionC: function() {
      return “C”
    }
  }
}

var vm = new Vue({
  mixins: [mesFonctions],
  // ...
})


#3

Bonjour Pascal
Merci pour la réponse. Je n’ai pas réussi avec mixin, il doit manquer des choses à rajouter.
J’ai cependant réussi de cette façon :

Dans mon fichier fichier.js : je crée des fonctions et je les mets dans exportdefault du même fichier js
export default { maFonctionA, maFonctionB, maFonctionC }

fonction maFonctionA
{
return "A";
}
........

Dans mon fichier vue : j’importe le fichierjs, je le déclare dans les datas et je l’utilise ensuite

import mesFonctions from "../fichier" export default { data() { return { fonctionDuFichier : mesFonctions } } } ......... et dans une fonction de la vue je peux faire : fonctionDuFichier.maFonctionA() pour récuperer la réponse. Désolé pour le formatage du texte dans ma réponse. Fabien