在 VueJS 中写入全局变量

Posted 2023-02-23

【中文标题】在 VueJS 中写入全局变量

【英文标题】：Writing to a global variable in VueJS

【发布时间】：2017-12-20 00:58:48

【问题描述】：

我使用：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
    
  
)

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

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

【参考方案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 功能就越多。

【讨论】：

谢谢伯特，你一定是哭着看到你的代码，这么容易搞砸了。 OK 明白了，但是变量会不会变，我真的不需要reactive，只需要全局存储。我只是用这个事件来证明我的改变发生了。

@TonySherman 它确实更新了变量，但是变量不是 reactive。请参阅我添加的注释。为了使其具有反应性，我们需要做额外的工作。

@TonySherman 我添加了一些代码，使其 reactive 但请注意最后一句话。你越依赖这家商店，你就越应该考虑使用 Vuex。

@TonySherman Doh，我没有看到您的评论已被编辑。是的，值已更新，无需额外工作。 This codepen 表示全局对象在你通过$myGlobalStuff 设置后发生变化。