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 da

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

You can use Store which will hold your application state.

const store = new Vuex.Store({
  state: {
    userData: []
  },
  mutations: {
    setUserData (state, data) {
      state.userData = data
    }
  }
})

With this you can access the state object as store.state, and trigger a state change with the store.commit method:

store.commit('setUserData', userData)

console.log(store.state.userData)

Answer 3

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.