Vuejs - Méthodes publiques

Durant le processus de développement d’une application Vuejs, vous pouvez avoir besoin de faire communiquer un module externe avec votre application. Voici comment faire.

Prérequis

Pour ce tuto j’ai utilisé la version 2.1.3 de vuejs

But du tutoriel

Réussir à communiquer avec vuejs via le scope window. Nous allons ici juste donner la possibilité de modifier un texte dynamiquement.

Le commencement

Un petit fichier index.html tout joli fera l’affaire

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

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

  <script src="app.js"></script>
</body>
</html>

Et un fichier app.js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Par défaut on voit bien qu’il nous est impossible de communiquer depuis le scope window avec l’instance Vue.

Première solution

La première solution qui nous viens à l’esprit est de passer notre instance de vue dans le scope global comme ceci :

window.Vue = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

// On peut maintenant communiquer n'importe quand avec notre instance vue comme ceci

window.Vue.$data.message = 'plop'

Cela à le mérite de fonctionner, mais…

Ne pas faire ça !!!

Le gros danger ici est qu’un utilisateur lambda pourra accéder entièrement à votre application et tout modifier (y compris le store).

La solution propre

La solution que j’ai retenu est de n’ouvrir qu’une seule méthode de notre instance qui nous permettra de communiquer de manière sécurisé avec l’extérieur.

var vue = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    api: function (action, value) {
      switch (action) {
        case 'changeMessage':
          this.message = value
          break
      }
    }
  }
})

// on met la méthode api de notre instance Vuejs dans le scope window

window.api = vue.api

// on appelle notre api comme ceci

window.api('changeMessage', 'plip')

[vuejs] Méthodes publiques

Durant le processus de développement d'une application Vuejs, vous pouvez avoir besoin de faire communiquer un module externe avec votre application. Voici comment faire.