web-dev-qa-db-fra.com

Données globales avec VueJs 2

Je suis relativement nouveau avec VueJS, et je n'ai aucune idée de comment rendre certaines données disponibles à l'échelle mondiale. Je voudrais enregistrer des données telles que les points de terminaison de l'API, les données utilisateur et d'autres données récupérées de l'API quelque part où chaque composant peut accéder à ces données.
Je sais que je peux simplement l'enregistrer avec juste Vanilla Javascript mais je suppose qu'il existe un moyen de le faire avec VueJS. Je peux peut-être utiliser le système de bus d'événements pour obtenir les données, mais je ne sais pas comment je peux implémenter ce système à mes besoins.

J'apprécierais que quelqu'un puisse m'aider avec cela.

javascriptvue.jsvuejs2vue-component
15
StefanJanssen

Créer un objet de données global

const shared = {
    api: "http://localhost/myApi",
    mySharedMethod(){
        //do shared stuff
    }
}

Si vous avez besoin pour l'exposer sur votre Vue, vous le pouvez.

new Vue({
    data:{
        shared
    }
})

Si vous ne le faites pas, vous pouvez toujours y accéder à l'intérieur de vos vues ou composants si vous les avez importés ou s'ils sont définis sur la même page.

C'est vraiment aussi simple que ça. Vous pouvez transmettre le partage en tant que propriété si vous en avez besoin ou y accéder globalement.

Lorsque vous débutez, il n'y a pas vraiment besoin de se compliquer . Vuex est souvent recommandé, mais il est également souvent excessif pour les petits projets. Si, plus tard, vous en avez besoin, ce n'est pas si difficile de l'ajouter. C'est aussi vraiment pour gestion de l'état et il semble que vous souhaitiez vraiment avoir accès à certaines données globales.

Si vous voulez devenir chic, faites-en un plugin.

const shared = {
  message: "my global message"
}

shared.install = function(){
  Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
    get () { return shared }
  })
}

Vue.use(shared);

Vue.component("my-fancy-component",{
  template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})

new Vue({
  el: "#app"
})

Maintenant, chaque Vue que vous créez et chaque composant y a accès. Voici un exemple .

35
Bert