Làm cách nào để chia sẻ dữ liệu giữa các thành phần không phải là cha-con trong Vue

Question

Tôi có 3 thành phần (get-users, get-projects, get-tasks) - mỗi nút chứa một yêu cầu ajax để truy xuất một số dữ liệu. Tôi muốn dữ liệu được trả về từ yêu cầu ajax được hiển thị trong thành phần độc lập thứ tư trên trang (kết quả hiển thị). ví dụ.

<div class="row"> 
    <div class="col-md-6> 
     <get-users></get-users> 
     <get-projects></get-projects> 
     <get-tasks></get-tasks> 
    </div> 
    <div class="col-md-6> 
     <show-results></show-results> 
    </div> 
</div> 

Thành phần get-người sử dụng:

<script> 
export default { 
    template: require('./get_users.template.html'), 

    data: function() { 
     return { 
      userList: '' 
     } 
    }, 

    methods: { 
     getUsers(e) { 
      e.preventDefault(); 

       this.$http.get('api/getusers').then(function (response) { 
        this.userList = response.data.users; // How can I also pass this to the show-results component?   
      }) 
     } 
    } 
} 
</script> 

Các Vue dụ/decalaration

var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

import getUsers from './components/get_users.vue'; 
import getProjects from './components/get_projects.vue'; 
import getTasks from './components/get_tasks.vue'; 
import showResults from './components/show_results.vue'; 


    new Vue ({ 
    el: '#app', 

    components: { GetUsers, GetProjects, GetTasks, ShowResults }, 

}) 

Là thành phần show-kết quả không phải là một phần của một mối quan hệ tôi cha/con không thể sử dụng phương thức $ broadcast hoặc $ dispatch của API.

Có thể chuyển dữ liệu từ thành phần này sang thành phần khác khi hoàn thành lời hứa ajax không?

Answer 1

Lưu ý: câu trả lời này chỉ có giá trị cho vue 1

Bạn có thể làm một phát sóng từ gốc Vue dụ ví dụ. this.$root cho phép bạn truy cập vào thành phần gốc trong phiên bản hiện tại của bạn. Như vậy nó sẽ đạt ít con của nó:

<script> 
export default { 
    template: require('./get_users.template.html'), 

    data: function() { 
     return { 
      userList: '' 
     } 
    }, 

    methods: { 
     getUsers(e) { 
      e.preventDefault(); 

       this.$http.get('api/getusers').then(function (response) { 
        this.userList = response.data.users; 
        this.$root.broadcast('show-results:users', { users: response.data.users }); 
      }) 
     } 
    } 
} 
</script> 

Sau đó, bạn nghe cho sự kiện show-results:users trong thành phần show-results của bạn:

events: { 
    'show-results:users': function(data) { 
     // do your stuff here 
    } 
} 

Tất nhiên bạn có thể cho trường hợp bất kỳ tên nào bạn muốn.

Answer 2

Với điều kiện Vue 2.0 hơi khác một chút vì chương trình phát sóng không được dùng nữa. Vue documentation nói về việc sử dụng xe buýt sự kiện tập trung để thực hiện việc này. Đây là cách bạn có thể;

1. Xác định trung tâm sự kiện tập trung. Vì vậy, trong bạn Các dụ Vue/decalaration xác định

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

2. Bây giờ trong thành phần của bạn, bạn có thể phát ra các sự kiện với

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

3. Và để lắng nghe bạn làm

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