Tái sử dụng code với Mixins trong Vuejs

457

Người viết: Yen Devy

1. Đặt vấn đề

Trong quá trình phát triển ứng dụng, có rất nhiều những functions hay datas bạn muốn sử dụng lại nhiều lần. Hãy tưởng tượng nếu bạn cứ vứt những đoạn code có chức năng tương tự nhau ở khắp mọi nơi, rồi đến 1 ngày đẹp trời bạn phải update lại logic cái function đó hay thay đổi 1 đoạn text nào đó và phải đảm bảo logic sẽ không bị miss ở bất cứ chỗ nào thì sẽ mệt mỏi như thế nào. Chưa kể sau này lại vài lần thay đổi như thế nữa. Vì vậy cần 1 nơi để chứa những thứ như thế ngay lúc này, nếu các bạn code PHP sẽ không khỏi xa lạ với những Helper or Config file thì với Vuejs, Mixins kì diệu tương tự. Let start!

2. Sử dụng

2.1 Khởi tạo

Mixin là 1 Obj có thể chứa toàn bộ các options của 1 component (data,methods,hooks…)

2.2 Khai báo

Có 2 cách để sử dụng myMixin đã định nghĩa ở trên kia đó là Local & Global .

Local Mixin

Inject trực tiếp Mixin vào component mà bạn muốn sử dụng Mixin đó. Cách này khuyến khích nên sử dụng còn lí do vì sao mình sẽ giải thích ở dưới.

Global Mixin

Inject cho toàn bộ ứng dụng, cách này không khuyến khích lắm vì nó sẽ affect đến toàn bộ các thực thể VUE được tạo ra, kể cả 3-party component => nên sử dụng Local Mixin. Chỉ nên sử dụng global Mixin để xử lí các thay đổi tùy chọn của từng component như trong ví dụ dưới.

3. Option Merging

Như các bạn đã thấy 1 Mixin có thể chứa toàn bộ các options của 1 component nên sau khi được inject vào component nó sẽ tự động merge các options vào component đó. Trường hợp trùng key thì component giành chiến thắng tức nó sẽ ghi đè lại giá trị ở Mixin. Đặc biệt với hook functions thì thứ tự run sẽ là Mixin-> Component. Cùng nhìn ví dụ dưới đây để hiểu rõ hơn nhé.

Merge Data Option Demo:

Merge Hook Functions Demo:

Merge Methods Demo:

Kết luận

Mình hay viết các function xử lí thường dùng hay các option config text trong Mixin sau đó inject vào component khi cần thiết. Không phải viết đi viết lại 1 function để dùng ở nhiều chỗ nữa. Khá là tiện phải không nhỉ. Nếu bạn có góp ý gì vui lòng để lại bình luận phía dưới giúp mình. Cảm ơn nhé.

Techtalk via Viblo

CHIA SẺ