Alert :
Composable được tác giả định nghĩa là Thư mục , việc định nghĩa này tự tác giả quy định theo góc nhìn của tác giả
Issue Problem
Khi dự án bắt đầu scale lên tầm trung hay càng ngày càng phình to ra số lượng file bên trong Composables của bạn ngày càng nhiều và dẫn tới việc quản lí trở nên khó khăn khi bạn ko biết được file này sẽ dẫn tới đâu sửa nó liệu có sao không hay bạn là người mới nhảy vào 1 dự án đã chạy trước đó và không biết là phần code này có trước đó ngồi viết 1 cái tương tự
What (Folder)Composables:
A "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.
Thư mục trong Vue 3 sẽ tận dụng composition api để giúp người dùng tách các phần code ra thành 1 file thư mục và khuyến khích người dùng hãy bỏ các phần code hay logic vào 1 thư mục
Why (Folder)Composables
Như chúng ta đã biết Vue 3 đề cao tính tái sử dụng cũng như quản lí code tốt giúp cho phần đọc hiểu code trở lên dễ dàng với các component lớn.
Let start it
Tôi sẽ trình bày cho bạn phần cấu trúc mà tôi
📁composables
|📂api
|__📄useBanner
|__📄useVoucher
|📂common
|__📄useNetwork
|__📄useCountdown
|__📄useStatusPage Folder 📂Api :
Có thể các bạn sẽ hỏi vì sao tôi lại tách folder API ra mà ko dùng trong page ,thì đơn giản là nó có thể gọi lại ở nhiều chỗ như trong phần user sẽ có voucher của user và landing cũng có tính năng này thì cùng gọi 1 api nên mình tách ra riêng. Với mỗi file chúng ta sẽ chứa 1 crud của mỗi
Folder 📂Common :
Sẽ dùng để chứa các function common