VueJSで@clickを使用せずに、あるコンポーネントのデータを$ emitのすべてに渡す

Question

vuejsを学びたい$ emitを使用して、@clickを使用せずに、あるコンポーネントのデータをすべてに渡す方法について質問がありました。 データをちょうど利用できるようにして、クリックを使わずにいつでもそれをつかむことができますか？

この例では、通常の@clickと$ emitを使用しています。

main.js

export const eventBus = new Vue() 

Hello.vue

<template> 
    <div> 
    <h2>This is Hello component</h2> 
    <button 
     @click="emitGlobalClickEvent()">Click me</button> 
    </div> 
</template> 
<script> 
import { eventBus } from '../main' 
export default { 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }, 
    methods: { 
    emitGlobalClickEvent() { 
     eventBus.$emit('messageSelected', this.msg) 
    } 
    } 
} 
</script> 

User.vue

<template> 
    <div> 
    <h2>This is User component</h2> 
    <user-one></user-one> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    import UserOne from './UserOne.vue' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log(msg) 
     }) 
    }, 
    components: { 
     UserOne 
    } 
    } 
</script> 

UserOne.vue

<template> 
    <div> 
     <h3>We are in UserOne component</h3> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log('From UserOne message !!!') 
     }) 
    } 
    } 
</script> 

私はこのメッセージを受け取りたいと思います：すべてのコンポーネントでHello.vueのVue.js Appへようこそ。ただし、@clickがない場合は可能です。

Answer 1

初期状態でオブジェクトを保持する別のJavascriptファイルを作成することができます。コンポーネントにデータを定義する方法と同様です。

このファイルでは、オブジェクトをエクスポートし、この共有状態にアクセスする必要があるすべてのコンポーネントにインポートします。この線に沿って何か：

import Store from 'store'; 

data() { 
    return { 
    store 
    } 
} 

これは役立つかもしれない：

https://vuejs.org/v2/guide/state-management.html

この時点で、あなたのアプリが複雑で、さらに成長した場合、あなたも追跡するのに役立ちますVuexをチェックアウトし始めるかもしれませんあなたの店の内部の変化（突然変異）の

この例はVuexの非常に簡略化されたバージョンです。