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,

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

 

  {{$myGlobalStuff.message}}
  
  Update Global

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.