4
votes

Comment créer des fonctions globales dans Vue.js?

Je souhaite utiliser certaines fonctions de manière globale dans mon application.
La plupart des réponses à ma question font référence à Vue Mixin. Bien que je l'utilise, cela ne résout pas mon problème. Ceci est mon essai

Vue.mixin({
    methods:{
        gFun(){
            console.log("Works");
        },
    }
})

const app = new Vue({
    el: '#app',
    data: {

    },
    created(){
        gFun();
    },
    methods: {

    }
});

Vue dit "ReferenceError: testMixin is not defined".
Je veux juste pouvoir utiliser gFun () globalement (sans utiliser comme this.gFun () ). Veuillez expliquer mon quelque chose.
Utiliser Vue Mixin ou non est correct.

vue-component vuejs2

0 commentaires

3 Réponses :

0
votes

Ce n'est pas un problème avec Vue.

Vous pouvez créer des fonctions globales en javascript en utilisant quelque chose comme:

window.gFun = window.gFun || () => console.log("Works");

0 commentaires

0
votes

Vous pouvez déclarer votre fonction globale comme function functon_name (parameters) {...} , essayer de passer l'instance vue comme un paramètre afin d'accéder à ses propriétés dans la fonction globale comme suit p>

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

</div>

Vue.config.devtools = false;
Vue.config.productionTip = false;

window.gFun = function(vm) {
  console.log(vm.message);
}


const app = new Vue({
  el: '#app',
  data: {
    message: "Hello !"
  },
  created() {
    gFun(this);
  },
  methods: {

  }
})

0 commentaires

4
votes

Une façon de procéder consiste à utiliser les mixins a > vous avez suggéré. Une autre excellente façon de procéder consiste à utiliser Plugin .

Remarquez comment je les ai déclarés et la différence entre la façon dont j'ai appelé les deux variables globales, en particulier le signe dollar ($) dans l'option plugin. this.gMixinFun () et this. $ GPluginFun () seront disponibles en tant que méthode globale dans les options de l'instance Vue.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
</div>

Vue.config.productionTip = false;
Vue.config.devtools = false;


// OPTION 1: Using Mixin
Vue.mixin({
  methods: {
    gMixinFun: function() {
      return "this is a mixin test"
    }
  }
});

// OPTION 2: Using plugin
const plugin = {
  install() {
    Vue.gPluginFun = () => 'this is a plugin test' //Vue.gPluginFun()
    Vue.prototype.$gPluginFun = () => 'this is a plugin test' //this.$gPluginFun()
  }
}

Vue.use(plugin)

const app = new Vue({
  el: '#app',
  created() {
    console.log("Using mixins =>", this.gMixinFun());
    console.log("Using plugins =>", this.$gPluginFun()); //or you can use Vue.gPluginFun() without the dollar($) sign
  }
})

1 commentaires

Si cela fonctionne pour vous, veuillez le marquer comme la bonne réponse. Merci :)