Données globales avec VueJs 2

Je suis relativement nouveau avec VueJS, et je n'ai aucune idée de la façon de rendre disponibles certaines données à l'échelle mondiale. J'aimerais sauvegarder des données comme les points d'extrémité de l'API, les données utilisateur et certaines autres données extraites de l'API quelque part où chaque composant peut accéder à ces données.
Je sais que je peux simplement enregistrer cela avec juste vanilla Javascript, mais je suppose qu'il existe un moyen de le faire avec VueJS. Je pourrais 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.

Faire un objet de données global

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

Si vous devez l' exposer sur votre Vue, vous pouvez.

 new Vue({ data:{ shared } })

Si vous ne le faites pas, vous pouvez l'accéder à l'intérieur de vos Vues ou de vos composants si vous l'avez importé ou si vous êtes défini sur la même page.

C'est vraiment aussi simple que ça. Vous pouvez passer partagé en tant que propriété si vous le souhaitez ou accéder à l'échelle mondiale.

Lorsque vous commencez simplement, il n'y a pas vraiment besoin de vous compliquer . Vuex est souvent recommandé, mais il est souvent trop important pour les petits projets. Si, plus tard, vous trouvez que vous en avez besoin, il n'est pas si difficile de l'ajouter. C'est aussi vraiment pour la gestion de l'état et il semble que vous voulez vraiment avoir accès à certaines données globales.

Si vous voulez avoir de la fantaisie, 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 .

J'utilise simplement un fichier environment.js pour stocker tous mes points d'extrémité comme propriétés d'objet.

 var urls = {}; urls.getStudent = "api/getStudent/{id}"; etc...

Ensuite, je fais référence à ce fichier environment.js dans la tête du document dans les pages où j'ai le code VueJS qui a besoin d'accéder à ces points finaux. Je suis sûr qu'il existe de nombreuses façons de le faire.