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.

There is a state management solution for Vue.js called Vuex: documentation It does everything you've mentioned. — Egor Stambakio
– Egor Stambakio, Commented Apr 3, 2017 at 20:13

Bert · Accepted Answer · 2017-04-03 20:53:08Z

51

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.

edited Apr 3, 2017 at 20:53

answered Apr 3, 2017 at 20:13

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Abhishek Jain Over a year ago

Great answer! In the codepen, you should console out the $myGlobalStuff instead of $store.

Bert Over a year ago

@AbhishekJain Didn't even notice that :) Thanks!

Bert Over a year ago

@AbhishekJain If you take the first approach and expose shared on data, then the object properties will be converted into observed (reactive) values. If you take the plugin approach, the easiest way is to make shared a Vue: const shared = new Vue({data:{message: 'my global message'}}). Then message will be reactive.

Bert Over a year ago

@AbhishekJain I'm not sure either is better. The plugin approach (especially when using a Vue as the shared object) is a very basic example of the approach Vuex takes. Under the hood in Vuex, the data is stored on a Vue object to make them reactive so you could argue it's in line with the "official" though process.

The Fool Over a year ago

You left out in the first example how to access the data in some child component. Thats what im looking for.

|

Saniya syed qureshi · Accepted Answer · 2019-12-12 06:40:19Z

3

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)

answered Dec 12, 2019 at 6:40

Saniya syed qureshi

3,1973 gold badges18 silver badges23 bronze badges

Comments

Balaji · Accepted Answer · 2021-02-08 14:22:50Z

1

Vue Mixin

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get $asset() {
        return "Can't change me!";
      }
    }
  }
})

template

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

Or

Vue.prototype.$asset = 'My App'

answered Feb 8, 2021 at 14:22

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Comments

victor · Accepted Answer · 2017-04-03 20:15:25Z

-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.

answered Apr 3, 2017 at 20:15

victor

8127 silver badges12 bronze badges

Collectives™ on Stack Overflow

Global data with VueJs 2

4 Answers 4

11 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related