How can I share data between non parent-child components in Vue

Question

I have 3 components (get-users, get-projects, get-tasks) - each contains a button which fires an ajax request to retreive some data. I want the data returned from the ajax r

Answer 1

With Vue 2.0 things are bit different as broadcast has been deprecated. Vue documentation talks about using centralized event bus to accomplish this. Here's how you could it;

1. Define centralized event hub. So in your The Vue instance/decalaration define

   const eventHub = new Vue() // Single event hub
   
   // Distribute to components using global mixin
   Vue.mixin({
       data: function () {
           return {
               eventHub: eventHub
           }
       }
   })
   

2. Now in your component you can emit events with

   this.eventHub.$emit('show-results:users', { users: response.data.users })
   

3. And to listen you do

   this.eventHub.$on('show-results:users', data => {
   // do your thing
   })