Mang EvenBus vào trong Vue
White

TungBuiThanh viết ngày 09/05/2017

Mình vốn bắt đầu bước vào lập trình với android. Thời đầu gặp bài toán: Khi gọi api hoặc download nhạc, làm thế nào để vẫn hiển thị UI cho người dùng và làm thế nào nhận biết data đã sẵn sàng để cập nhập lại UI. Có người bảo dùng thread khác, có người bảo dùng async task. Nhưng sau một thời gian tìm kiếm, Evenbus là cách làm mình thấy tốt nhất. Khi làm việc với Vue mình cũng gặp trường hợp tương tự. Vậy làm thế nào để đưa EventBus vào Vue??

Ý tưởng là sử dụng publish/subscribe. Cụ thể hơn là sử dụng event vm.$onvm.$emit của Vue.

Đầu tiên chúng ta cần tạo một EventBus. Ở đây mình sẽ tạo 1 file event-bus.js như sau:

alt text

Ok, thế là đủ. Vì Vue có event $emit$on nên chúng ta có thể sử dụng EventBus.$emit()EventBus.$on.
Tiếp theo mình sẽ tạo một component nhận input từ người dùng và emit mỗi khi input thay đổi:

alt text

Trong component trên mình dùng @input để bắt sự kiện input thay đổi. Dùng v-on:input cho phép ta có thể nhận sự kiên bất kỳ khi nào value của input thay đổi. Và mỗi khi thay đổi ta sẽ emit sự kiện inputChanged kèm theo message (là input của người dùng).

Bây giờ chỉ việc thêm component lắng nghe sự kiện từ EventBus:

alt text
EventBus.$on(“inputChanged”,…) sẽ chờ đợi bất kỳ khi nào EventBus.$emit(“inputChanged”,…) thì nó sẽ gọi function đằng sau (ở ví dụ của mình là update message).

Note:

Có thể dùng EventBus.$once() nếu chỉ muốn nhận event một lần duy nhất.
Dùng EventBus.$off() khi bạn không muốn nhận event nữa.

Các bạn có thể tham khảo code của ví dụ tại đây

Ngoài cách tự viết EventBus thì các bạn có thể tham khảo 2 thư viện dưới đây:

  • Vue-geb – Global Event Bus: Một thư viện khá dễ dùng và có thể sử dụng dễ dàng với Vue
  • EventBus: Một thư viện EventBus viết bằng js và có thể sử dụng bất kỳ đâu kể cả không phải Vue. Tuy nhiên mình thấy hơi khó sử dụng.

TungBuiThanh 10-05-2017

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

TungBuiThanh

2 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
2 2
Một đêm đẹp trời, trong lúc đang ngồi hóng lột đồ (đặc sản Techkids :3 ) chợt nhớ ra có bài tập deadline là tối hôm sau mà ngày thì đi cả ngày. Ngậ...
TungBuiThanh viết gần 4 năm trước
2 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!