兄弟コンポーネント間のVue共有状態

Question

おそらく現在はおそらく過剰な状態であるため、vuexを状態管理に使用したくないでしょう。 私はhttps://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communicationを見ました。私は単一のファイルコンポーネントを使用しているので、どちらのコンポーネントにも共有バスがどこに定義されているのかはわかりません。

var bus = new Vue() 

ChildA.Vue

watch: { 
    sideNav: (newValue) => { 
    bus.$emit('sideNav-changed', newValue) 
    } 
} 

ChildB.Vue

created() { 
    bus.$on('sideNav-changed', data => { 
    console.log(`received new value: ${data}`) 
    // update own copy here 
    }) 
} 

Parent.Vue

<template> 
    <childA> 
    </childA> 
    <childB> 
    </childB> 
</template> 

私はsideNavの変更をChildAで監視し、それをChildBに送信して独自の値を更新したいと考えています。それに対する答えを見つけ

Answer 1

...

私はmain.js

const bus = new Vue() // Single event hub 

// Distribute to components using global mixin 
Vue.mixin({ 
    data: function() { 
    return { 
     bus : bus 
    } 
    } 
}) 

にそれを宣言し、また

watch: { 
    sideNav: function (newValue) { 
    bus.$emit('sideNav-changed', newValue) 
    } 
} 

Answer 2

に

watch: { 
    sideNav: (newValue) => { 
    bus.$emit('sideNav-changed', newValue) 
    } 
} 

を変更ですthis answerあなたに良いことはありますか？イベントですべてを行うことはできますが、それらを避けることができれば、そうすべきです。あなたは現在vuexを望んでいないかもしれません。それが私の居場所です。しかし、最初からグローバルスコープの店舗とリアクティブパイプが必要です。ページ上の要素とストア内の項目との関係を「宣言」し、次にbastaとします。 Vueは残りの世話をします。あなたはイベントを気にしません。

Answer 3

だけのウィンドウにそれを添付することですこれを実行する最も簡単な方法、すなわち次に

window.bus = new Vue() 

それは、例えばグローバルミックスインを定義する必要なしに、あなたのすべてのコンポーネントで利用できるようになりますこれでも動作します：

watch: { 
    sideNav(newValue) { 
    bus.$emit('sideNav-changed', newValue) 
    } 
} 

希望します。