Vue making a variable available in all components

Question

I am currently reading out a language setting from the dom and setting it as a global Vue.js variable like this:

const language = document.querySelector('html').getAttribute('lang');
Vue.prototype.$language = language;

It works fine but I have also seen this as an example from a Vue.js event bus:

Object.defineProperties(Vue.prototype, {
    $bus: {
        get() {
            return EventBus;
        }
    }
});

What is the real difference between these two and is there possible a more preferred way of doing this?

Not really vue-relative, kinda dupe of: https://stackoverflow.com/questions/38961414/object-defineproperty-or-prototype — FitzFish, Jun 27 '17 at 08:12
@Cobaltway in my case not having any configuration options would result in the same as simply setting the prototype directly? Or are the default settings still different? — Stephan-v, Jun 27 '17 at 08:17
I don't think there is any real difference if you are not using any of defineProperties options. It may be marginally faster to assign directly the prototype. Must be tested. — FitzFish, Jun 27 '17 at 08:25

score 3 · Accepted Answer · edited Jul 15 '22 at 22:01

3

Object.defineProperties is can be used when you need to set property descriptors such as getters , setters ,read only etc .

But in your case using Vue.prototype.$language = language; will be the more cleaner approach.

If you are looking for Vue preferred way, this is the guide on adding instance properties to Vue instance.

edited Jul 15 '22 at 22:01

tony19

answered Jun 27 '17 at 11:14

CuriousGuy

1 Answers1