javascript-在VueJS中写入全局变量

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-在VueJS中写入全局变量，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2004字，纯文字阅读大概需要3分钟。

内容图文

我使用Global data with VueJs 2作为起点,因为我只想读/写一个变量.

我在现有代码中添加了@click事件以修改变量,但出现“未捕获的ReferenceError：未定义$myGlobalStuff”.

谁能看到我在做什么错：

HTML：

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

VueJS：

var shared = {
      讯息：“我的全球讯息”
    }

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

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

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

解决方法:

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

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

而且您不会再收到该错误.

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

为了使其具有反应性,我们可以添加一个更改.

var shared = new Vue({data:{ message: "my global 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功能就越多.

内容总结

以上是互联网集市为您收集整理的javascript-在VueJS中写入全局变量全部内容，希望文章能够帮你解决javascript-在VueJS中写入全局变量所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---