How to share Global data with Vue Js 2?

Question

Im relatively new with VueJS, and I've got no clue about how to make some data globally available.

I would like to save data like API endpoints, user data and some other data that is retrieved from the API somewhere where each component can get to this data.
I know I can just save this with just vanilla Javascript but I suppose there is a way to do this with VueJS. 

I may be able to use the event bus system to get the data but I don't know how I can implement this system to my needs.

I would appreciate it if somebody can help me with this.

Prasad Patil · Accepted Answer

Make a global data object const shared = { api: "http://localhost/myApi", mySharedMethod(){ //do shared stuff } } If you need to expose it on your Vue, you can. new Vue({ data:{ shared } }) If you don't, you can still access it inside your Vues or components if you've imported it or they are defined on the same page. It's really as simple as that. You can pass shared as a property if you need to, or access it globally. When you're just starting out there is no real need to get complicated. Vuex is often recommended, but is also often overkill for small projects. If, later, you find you need it, it's not that hard to add it in. It's also really for state management and it sounds like you just really want access to some global data. If you want to get fancy, make it a 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: "

My Fancy Stuff: {{$myGlobalStuff.message}}

" }) new Vue({ el: "#app" }) Now, every Vue you create and every component has access to it. Here is an example

Vue JS

Similar Questions

Arrow function in vue computed does not working

How to add external JS scripts to VueJS Components?

Getting Error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand. Vue.JS 2.0

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram