Vue not updating global $ prototype variable

Question

I am trying to create a global variable in Vue that I can read and update all over the application. I decided to use the prototype approach but for some reason the variable gets updated (the console.log changes) but the front end () doesn't get updated. Could someone please explain to my why this does what it does and how I can solve this "global variable" problem.

main.js:

Vue.prototype.$something = 'Hi there!';

// I tried this but it gives the same result
// Vue.prototype.$something = { text: 'Hi there!' };

component1.vue:

<label>{{$something}}</label>

component2.vue:

<label>{{$something}}</label>
<button v-on:click="changeThat()">Change</button>
...
changeThat() {
  console.log(this.$something); // 'Hi there!'
  this.$something = "Good bye!";
  console.log(this.$something); // 'Good bye!'
}

I want the two <label> to update when this.$something is changed.

I don't think vue manages prototypes

Bergi
– Bergi

2020-06-11 10:33:43 +00:00
Commented Jun 11, 2020 at 10:33 — Bergi
– Bergi, Commented Jun 11, 2020 at 10:33

tony19 · Accepted Answer · 2022-07-15 21:21:48Z

4

You make use of Vue.observable like this:

Vue.prototype.$globalData = Vue.observable({
  label: 'test' 
});

In any of the components in the app, you can use it like this:

{{ $globalData.label }}

If you change the label anywhere like this:

this.$globalData.label = 'new test';

It'd reflect in all of the components.

edited Jul 15, 2022 at 21:21

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 11, 2020 at 10:36

abhim

1,1961 gold badge9 silver badges20 bronze badges

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

1 Comment

Frank Over a year ago

100% perfect answer. Thank you! :)

Collectives™ on Stack Overflow

Vue not updating global $ prototype variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related