Global data with VueJs 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.

Answer 1

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: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})

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

Now, every Vue you create and every component has access to it. Here is an example.

Answer 2

I just use an environment.js file to store all of my endpoints as object properties.

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

Then I put reference to this environment.js file in the head of document on pages where I have VueJS code that needs access to those endpoints. Im sure there are many ways to do this.