Global Event Bus Trong Vue 3

Khi xây dựng ứng dụng Vue, đặc biệt là những ứng dụng có nhiều thành phần lồng nhau sâu, một trong những phần khó khăn nhất là giao tiếp. Làm thế nào để gửi tín hiệu từ một thành phần con đến một thành phần không liên quan mà không cần truyền props xuống tận cùng hoặc nâng trạng thái lên quá cao?

Trong Vue 2, câu trả lời thường là một global event bus — một cách đơn giản nhưng hiệu quả để cho phép các thành phần “nói chuyện” với nhau thông qua việc phát và lắng nghe sự kiện. Tuy nhiên, trong Vue 3, tính năng này đã bị xóa bỏ như một phần của các thay đổi lớn.

Trong bài viết này, chúng ta sẽ khám phá:

• Tại sao event bus cổ điển bị xóa trong Vue 3
• Cách triển khai một global event bus bằng mitt
• Các lựa chọn thay thế như Pinia cho quản lý trạng thái
• Thực tiễn tốt nhất khi lựa chọn giữa các giải pháp khác nhau

Chúc bạn vui vẻ!

🤔 Tại Sao Event Bus Bị Xóa Trong Vue 3?

Trong Vue 2, các nhà phát triển thường dựa vào các phương thức $on, $emit và $off của các phiên bản Vue để tạo ra một event bus đơn giản cho giao tiếp giữa các thành phần. Tuy nhiên, với Vue 3, chức năng này đã bị xóa bỏ như một phần của một thay đổi lớn.

👉 Theo hướng dẫn di chuyển chính thức, API sự kiện đã bị xóa để khuyến khích các mẫu quản lý trạng thái có thể dự đoán hơn và giảm thiểu sự phụ thuộc ẩn giữa các thành phần.

Nhưng đừng lo — mặc dù event bus đã bị xóa, bạn vẫn có thể đạt được cùng một kết quả với các thư viện như mitt.

🟢 Tạo Global Event Bus Với Mitt

Mitt là một thư viện phát sự kiện nhỏ gọn (~200b) hoạt động hoàn hảo như một global event bus trong các ứng dụng Vue 3. Hãy cùng xem cách thiết lập nó.

Bước 1: Cài Đặt Mitt

npm install mitt

Bước 2: Tạo Tệp Event Bus

Tạo một tệp gọi là eventBus.js trong dự án của bạn:

// eventBus.js
import mitt from 'mitt';

const emitter = mitt();

export default emitter;

Bước 3: Sử Dụng Event Bus Trong Các Thành Phần

Thành phần A – phát một sự kiện:

<script setup>
import emitter from '../eventBus.js';

function sendMessage() {
  emitter.emit('custom-event', { text: 'Xin chào từ Thành phần A!' });
}
</script>

<template>
  <button @click="sendMessage">Gửi Sự Kiện</button>
</template>

Thành phần B – lắng nghe một sự kiện:

<script setup>
import { onMounted, onUnmounted } from 'vue';
import emitter from '../eventBus.js';

function handleMessage(payload) {
  console.log('Nhận:', payload.text);
}

onMounted(() => {
  emitter.on('custom-event', handleMessage);
});

onUnmounted(() => {
  emitter.off('custom-event', handleMessage);
});
</script>

<template>
  <p>Kiểm tra console để nhận tin nhắn 🚀</p>
</template>

Vậy là xong! Bạn đã có một global event bus đơn giản trong Vue 3.

✅ Thực Tiễn Tốt Nhất

• Sử dụng event bus cho giao tiếp nhẹ nhàng, tách biệt — tuyệt vời cho việc lập trình thử nghiệm nhanh hoặc các tính năng nhỏ.
• Tránh lạm dụng — quá nhiều sự kiện toàn cục có thể làm cho ứng dụng của bạn khó debug.
• Xem xét Pinia cho các ứng dụng phức tạp — cho các ứng dụng có trạng thái chia sẻ hoặc nhiều phụ thuộc sự kiện, Pinia là một lựa chọn có cấu trúc và mở rộng hơn.
• Luôn dọn dẹp các listener — sử dụng onUnmounted để tránh rò rỉ bộ nhớ.

📖 Tìm Hiểu Thêm

Nếu bạn muốn tìm hiểu thêm về Vue, Nuxt, JavaScript hoặc các công nghệ hữu ích khác, hãy kiểm tra VueSchool bằng cách nhấp vào liên kết này hoặc hình ảnh bên dưới:

Nó bao gồm hầu hết các khái niệm quan trọng trong việc xây dựng các ứng dụng Vue hoặc Nuxt hiện đại có thể giúp bạn trong công việc hàng ngày hoặc các dự án bên lề 😉

🧪 Nâng Cao Kỹ Năng

Một chứng chỉ nâng cao kỹ năng của bạn, xây dựng uy tín và mở ra những cơ hội mới. Dù bạn đang phát triển sự nghiệp hay thay đổi hướng đi, đây là một bước thông minh hướng tới thành công.

Hãy kiểm tra Certificates.dev bằng cách nhấp vào liên kết này hoặc hình ảnh bên dưới:

Đầu tư vào bản thân — hãy được chứng nhận trong Vue.js, JavaScript, Nuxt, Angular, React, và nhiều hơn nữa!

✅ Tóm Tắt

Mặc dù Vue 3 đã xóa bỏ chức năng event bus tích hợp, nhưng điều đó không có nghĩa là bạn không thể sử dụng một cái. Với một thư viện nhỏ như mitt, bạn có thể dễ dàng tạo ra một global event bus cho các nhu cầu giao tiếp đơn giản.

Tuy nhiên, nếu ứng dụng của bạn phát triển và yêu cầu trạng thái chia sẻ hoặc giao tiếp phức tạp, Pinia là giải pháp được khuyến nghị cho khả năng bảo trì và mở rộng.

Chúc bạn thành công!

Và chúc bạn lập trình vui vẻ như mọi khi 🖥️