VueJSのグローバル変数への書き込み

Question

私は以下を使用しています：Global data with VueJs 2私の出発点として、私は1つの変数をR/Wしたいだけです。

変数を変更するために既存のコードに@clickイベントを追加しましたが、未知のReferenceError：$ myGlobalStuffが定義されていません。

HTML：：

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

VueJS：

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

：

varが= { "私のグローバルなメッセージ" メッセージを}共有

は、誰もが私が間違っているのかを見ることができます

ご覧のとおり、私はほとんど追加していません既存のコードに置き換えてください。

私が見落としていることについての助けをいただければ幸いです。

Answer 1

まず、$myGlobalStuffを参照していないため、取得したエラーはthisです。これに変更する

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

これ以上エラーは発生しません。

しかし、私はそれがあなたがそれを期待しているようにはうまくいかないと思っています。それで、反応しないでしょう。 I あなたが望むものは、ページ上でメッセージが更新されることであり、実際にはこのコードの意図ではありません。元のポイントは、各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の多くの機能が実装されます。