Writing to a global variable in VueJS

Question

I am using : Global data with VueJs 2 as my starting point as I only want to R/W one variable.

I have added an @click event to the existing code to modify the variable, but I get an "Uncaught ReferenceError: $myGlobalStuff is not defined".

Can anyone see what I am doing wrong:

HTML:

 <div id="app2">
  {{$myGlobalStuff.message}}
  <my-fancy-component></my-fancy-component>
  <button @click="updateGlobal">Update Global</button>
</div>

VueJS:

var 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: "#app2",
  mounted(){
    console.log(this.$store)
  },
  methods: {
    updateGlobal: function() {
      $myGlobalStuff.message = "Done it!"
      return
    }
  }
})

As you can see I am adding very little to the existing code, and that works well.

Any help on what I am overlooking would be appreciated.

Answer 1

Well first, the error you are getting is because you do not reference $myGlobalStuff using this. Change to this

this.$myGlobalStuff.message = "Done it!"

And you won't get the error anymore.

But I suspect it won't work the way you are expecting it to, in that, it won't be reactive. I think what you want is for the message to be updated on the page, and that is not really the intent of this code. The original point was just to supply some global values to each Vue or component.

To make it reactive we can add one change.

var shared = new Vue({data:{ message: "my global message" }})

Once you do that, message will be a reactive value.

console.clear()

var shared = new Vue({data:{ 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: "#app2",
  mounted(){
    console.log(this.$store)
  },
  methods: {
    updateGlobal: function() {
      this.$myGlobalStuff.message = "Done it!"
      return
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
 <div id="app2">
  {{$myGlobalStuff.message}}
  <my-fancy-component></my-fancy-component>
  <button @click="updateGlobal">Update Global</button>
</div>

This is a very naive implementation of how Vuex works. The further you progress down this path, the more features of Vuex you end up implementing.