在 VueJS 中写入全局变量 [英] Writing to a global variable in VueJS

问题描述

我正在使用:VueJs 2 的全局数据 作为我的起点只想 R/W 一个变量.

我在现有代码中添加了一个 @click 事件来修改变量，但我收到未捕获的引用错误:$myGlobalStuff 未定义".

谁能看到我做错了什么:

HTML:

 
{{$myGlobalStuff.message}}<my-fancy-component></my-fancy-component><button @click="updateGlobal">更新全局</button>

VueJS:

var 共享 = {消息:我的全球消息"}

shared.install = function(){Object.defineProperty(Vue.prototype, '$myGlobalStuff', {get(){返回共享}})}Vue.use(shared);Vue.component("my-fancy-component",{模板:<div>我喜欢的东西:{{$myGlobalStuff.message}}</div>"})新的 Vue({el: "#app2",安装(){console.log(this.$store)},方法: {更新全局:函数(){$myGlobalStuff.message = "完成了！"返回}}})

如您所见，我在现有代码中添加的内容很少，而且效果很好.

对我所忽视的任何帮助将不胜感激.

解决方案

首先，您得到的错误是因为您没有使用 this 引用 $myGlobalStuff.改成这个

this.$myGlobalStuff.message = "完成了！"

而且您不会再收到错误消息.

但我怀疑它不会像您期望的那样工作，因为它不会是被动的.我认为您想要的是在页面上更新消息，而这并不是这段代码的真正意图.最初的目的只是为每个 Vue 或组件提供一些全局值.

要使其反应性，我们可以添加一项更改.

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

一旦你这样做了，message 将是一个反应值.

console.clear()var shared = new Vue({data:{ message: "我的全局消息" }})shared.install = function(){Object.defineProperty(Vue.prototype, '$myGlobalStuff', {get(){返回共享}})}Vue.use(shared);Vue.component("my-fancy-component",{模板:<div>我喜欢的东西:{{$myGlobalStuff.message}}</div>"})新的 Vue({el: "#app2",安装(){console.log(this.$store)},方法: {更新全局:函数(){this.$myGlobalStuff.message = "完成了！"返回}}})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"><;/脚本><div id="app2">{{$myGlobalStuff.message}}<my-fancy-component></my-fancy-component><button @click="updateGlobal">更新全局</button>

这是一个非常 Vuex 工作原理的简单实现.沿着这条路走得越远，最终实现的 Vuex 功能就越多.

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.

解决方案

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.

这篇关于在 VueJS 中写入全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！