在 VueJS 中写入全局变量

Question

我使用：Global data with VueJs 2 作为我的起点，因为我只想 R/W 一个变量。

我已在现有代码中添加了一个 @click 事件来修改变量，但我收到“未捕获的 ReferenceError: $myGlobalStuff is not defined”。

谁能看到我做错了什么：

HTML：

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

VueJS：

var 共享 = { 信息：“我的全球信息” }

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
    }
  }
})

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

对我所忽略的内容的任何帮助将不胜感激。

Answer 1

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

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

而且你不会再收到错误了。

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

要使其反应，我们可以添加一个更改。

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

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

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>

这是 Vuex 工作原理的一个非常天真的实现。你在这条路上走得越远，最终实现的 Vuex 功能就越多。