Question

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

我在现有代码中添加了一个@click事件来修改变量，但是我得到了一个“Uncaught 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 = { 消息：“我的全球信息” }

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

首先，您收到的错误是因为您未使用# # Generates a full list of installed programs. # # Temporary auxiliar file. $tmpFile = "tmp.txt" # File that will hold the programs list. $fileName = "programas-instalados.txt" # Columns separator. $separator = "," # Delete previous files. Remove-Item $tmpFile Remove-Item $fileName # Creates the temporary file. Create-Item $tmpFile # Searchs register for programs - part 1 $loc = Get-ChildItem HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall $names = $loc |foreach-object {Get-ItemProperty $_.PsPath} foreach ($name in $names) { IF(-Not [string]::IsNullOrEmpty($name.DisplayName)) { $line = $name.DisplayName+$separator+$name.DisplayVersion+$separator+$name.InstallDate Write-Host $line Add-Content $tmpFile "$line`n" } } # Searchs register for programs - part 2 $loc = Get-ChildItem HKLM:\Software\Wow6432Node\Microsoft\Windows\CurrentVersion\Uninstall $names = $loc |foreach-object {Get-ItemProperty $_.PsPath} foreach ($name in $names) { IF(-Not [string]::IsNullOrEmpty($name.DisplayName)) { $line = $name.DisplayName+$separator+$name.DisplayVersion+$separator+$name.InstallDate Write-Host $line Add-Content $tmpFile "$line`n" } } # Sorts the result, removes duplicate lines and # generates the final file. gc $tmpFile | sort | get-unique > $filename引用$myGlobalStuff。改为这个

this

你不会再得到错误了。

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

要使其被动，我们可以添加一个更改。

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

执行此操作后，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
    }
  }
})

这是关于Vuex如何工作的非常天真的实现。您沿着这条路走得越远，您最终实施的Vuex功能就越多。

写入VueJS中的全局变量

1 个答案: