Currently, I am referring to Global data with VueJs 2 for my project, focusing on only one variable.
In the code provided, I have included an @click event to update the variable. However, it throws an error stating "Uncaught ReferenceError: $myGlobalStuff is not defined".
Can someone assist in identifying my mistake?
Here is a snippet of the HTML:
<div id="app2">
{{$myGlobalStuff.message}}
<my-fancy-component></my-fancy-component>
<button @click="updateGlobal">Update Global</button>
</div>
And here is the corresponding VueJS code:
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
}
}
})
Minimal changes were made to the existing code, and everything seems to be working fine.
If anyone can point out what I might be missing, it would be greatly appreciated.