Giới thiệu
Trong quá trình làm VueJS NuxtJS hay thậm chí là Laravel mình cũng hay áp dụng các pattern như Service hoặc Repository.
Mình cũng đã trải nghiệm qua thằng Angular, và thực sự nó support các pattern này khá tốt và theo khuôn khổ. Với VueJS hay Nuxt thì các dev sẽ phải cần có kinh nghiệm và tự dựng bằng tay
Bài viết này mình mong muốn chia sẻ về cách sử dụng Service pattern trong NuxtJS mình hay làm nhằm phục vụ cho việc xử lý logic nghiệp vụ.
Lý do nên dùng?
- Thứ nhất là mình sẽ tạch độc lập việc xử lý logic nghiệp vụ ra, code vừa đẹp vừa rõ ràng dễ maintaince.
- Áp dụng Factory pattern được trơn tru hơn, nếu được sẽ có dịp mình viết về thằng này.
- Vì nó độc lập… sẽ dễ tái sử dụng hơn.
- Việc viết test đơn giản hơn.
Chung quy lại thì mình thấy khi mình maintaince các dự án có và không có các pattern như trên thì toàn gặp 1 vấn đề
Thay vì tôi phải sửa lại 1 file thì tôi lại phải sửa hàng chục file
Triển khai qua ví dụ
- Ở ví dụ này, mình sẽ lấy 1 thực thể Product làm demo và trong dự án sẽ sử dụng axios để phục vụ cho việc call API ( hoặc có thể thêm cả VueX )
- Trước hết tại thư mục plugins mình sẽ có 1 file kiểu như sau
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// plugins/services.js</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>$axios<span class="token punctuation">}</span><span class="token punctuation">,</span> inject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'getProducts'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">await</span> $axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'endpoint_url'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> query <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'storeProduct'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">await</span> $axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'endpoint_url'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
- Trong Vue component mình có thể sử dụng nó như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'ProductComponent'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// accessing $getProducts service using this</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getProducts</span><span class="token punctuation">(</span><span class="token punctuation">{</span>price<span class="token operator">:</span> <span class="token string">'50000'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// accessing $storeProduct service</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$storeProduct</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'awesome product'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
- Hoặc khi sử dụng với Vuex
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> actions<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">async</span> <span class="token function">getProducts</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getProducts</span><span class="token punctuation">(</span><span class="token punctuation">{</span>price<span class="token operator">:</span> <span class="token string">'50000'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'GET_PRODUCT_MUTATION'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token function">storeProduct</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$storeProduct</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'STORE_PRODUCT_MUTATION'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Triển khai case thực tế
- Ok bên trên là ví dụ về triển khai 1 services, trong trường hợp ở các case thực tế chúng ta có thể tham khảo cách triển khai như sau
1 2 3 4 5 6 7 8 9 10 | // Struct folder pages services |_AxiosConfig.js |_Index.js |_ProductService.js |_OrderService.js ... |
- Trong
AxiosConfig.jssẽ tiến hành trả về 1 instance axios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">client</span> <span class="token operator">=</span> <span class="token parameter">url</span> <span class="token operator">=></span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> baseURL<span class="token operator">:</span> url<span class="token punctuation">,</span> withCredentials<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> headers<span class="token operator">:</span> <span class="token punctuation">{</span> Accept<span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span> <span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> client<span class="token punctuation">;</span> |
- Trong mỗi services chúng ta sẽ tiền hành inject client vào
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">// plugins/services/ProductService.js</span> <span class="token keyword">import</span> client <span class="token keyword">from</span> <span class="token string">'./AxiosConfig'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> baseUrl <span class="token operator">=</span> <span class="token string">'https://api...'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function-variable function">getProducts</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">query</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">client</span><span class="token punctuation">(</span>baseUrl<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'endpoint_url'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> query <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">storeProduct</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">client</span><span class="token punctuation">(</span>baseUrl<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'endpoint_url'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- Và giờ là lúc ta đăng ký các Service vào trong file
services/Index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> productService <span class="token keyword">from</span> <span class="token string">'./services/ProductService'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">inject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> allMethods <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token function">productService</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// another service</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> methods <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>allMethods<span class="token punctuation">)</span> methods<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">method</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">inject</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> allMethods<span class="token punctuation">[</span>method<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
…
Và sau đó là gọi trong asyncData hoặc MapGetters bla bla v….v =)))
Kết bài
- Trên đây là các cách mình hay thực hiện, nếu các bạn có các cách khác hãy comment ở dưới bài viết để mọi người cùng nghiên cứu và chia sẻ nhé ^_^
- LƯU Ý: Sẽ có nhiều bạn sau khi đọc xong kiểu : Ủa sao nhìn nó giống Repository Pattern vậy ta?? Ờm thực ra mình chỉ ví dụ về việc call API thôi còn thực ra mình cũng ghi rõ là giải quyết logic nghiệp vụ =)) có nghĩa là sau này khi chỉ quan tâm tới việc call API thì chúng ta có thể lồng Repository Pattern vào đó và mình muốn sẽ chia sẻ trong 1 bài viết khác giữa 2 thằng này !
- Thanks for reading !