VueJS được coi là một trong những framework JavaScript tốt nhất hiện nay, thậm chí nhiều người còn cho rằng Vue sẽ dần thay thế cho Angular và React trong tương lai. VueJS không mới hơn hay phổ biến hơn so với những framework khác nhưng vẫn sở hữu những yếu tố tạo nên sự khác biệt. Và khi nhắc đến VueJS người ta nghĩ ngay đến VueX. Vậy VueX là gì và sử dụng như thế nào? Hãy khám phá cùng mình trong bài viết này nhé!
Tóm Tắt
1. VueX là gì?
Theo như trang chủ của VueX giới thiệu, thì VueX là state management pattern + library – thư viện giúp quản lý trạng thái các component trong VueJS, đây là nơi lưu trữ tập trung dữ liệu cho tất cả các component trong một ứng dụng.
Lấy một ví dụ dễ hiểu hơn, nếu như bạn đã làm việc với các Framework khác rồi thì VueX cũng có thể hiểu giống như Ngrx với Angular 2+, Redux với ReactJS. Nó đều được sinh ra để quản lí các data là ít biến đổi trong app, hoặc để truyền sự kiện hay cũng có thể hiểu là để quản lí state và share data cho nhau giữa các Component.
Vì là tư tưởng là giống nhau nên bạn nào đã kinh qua Ngrx hoặc Redux rồi thì sẽ học VueX rất nhanh thôi. Nhưng theo như kinh nghiệm cá nhân của mình thì Vuex và Redux dễ học, dễ hiểu hơn Ngrx cho người mới bắt đầu.
2. Các thành phần kiến trúc của VueX
Trong phần này, mình sẽ giới thiệu tổng quát các thành phần xung quanh sơ đồ kiến trúc VueX dưới đây nhé:
Như các bạn có thể thấy ở đây chúng ta có một số thuật ngữ cốt lõi cần ghi nhớ đó là: State, Store, Getters, Actions, Mutations. Trước khi vào chi tiết từng phần thì các bạn cần hiểu là khi dùng VueX thì các phần data là ít thay đổi sẽ được ưu tiên lưu vào store. Và khi đã lưu vào đây rồi, nếu muốn thay đổi các state này các bạn không được thay đổi (change) trực tiếp mà bắt buộc phải thay đổi nó qua một action đến một mutations nào đó, ở đây mutations mới có thể thay đổi state nhé.
State
State là nơi lưu giữ data trong từng component. Đối với Angular 2+, nó là các thuộc tính của class (component), đối với React thì nó rõ ràng là các phần trong this.state (Đối với loại Class component) và useState (Đối với function component). Còn riêng đối với VueJS thì nó là các phần trong data nhé các bạn.
Và khi mà chúng ta add VueX vào Vue thì các bạn hiểu đơn giản là nó không cục bộ ở từng Component nữa mà sẽ được share cho các component và service khác trong hệ thống.
Vậy có bạn lại hỏi: Ơ thế cái gì cũng cho vào State của Store à, liệu có nhiều quá không? Câu trả lời là không phải tất cả đều cho vào đó nhé các bạn. Chú ý là chỉ nên gắn những phần là singleton thôi nhé. Ở đây ta sẽ cần hiểu singleton nghĩa là ít thay đổi, hoặc không thay đổi trong suốt vòng đời của app.
Store
Store là phần quản lí State, nó sẽ có các phương thức cho phép bạn thay đổi state một cách gian tiếp thông qua dispatch hoặc một commit. Store là duy nhất bên trong một app và sẽ được khởi tạo cùng với root.
Getters
Bạn có thể hiểu Getters là một computed dùng để tính toán data, xử lí một logic chung nào đó mà nhiều component dùng. Hàm viết ở đây chỉ có thể dùng để lấy data ra chứ không thể chỉnh sửa (Liên hệ một chút là nó giống như Getter trong OOP vậy – thể hiện tính bao đóng).
Actions
Trong Action sẽ thường chứa logic liên quan đến nghiệp vụ business và các bạn nên hiểu là nó không trực tiếp thay đổi state. Nếu muốn thay đổi State thì các bạn cần dùng một Commit đã được định nghĩa tại Mutations. Lí do là bởi vì Actions thường được chạy bất đồng bộ (Code của bạn vẫn chạy khi mà actions chưa hoàn thành) và như vậy khi nó hoàn thành thì chúng ta mới lên Commit để change data.
Mutations
Các hàm trong Mutations thường sẽ không nên chứa logic hay nghiệp vụ business gì, nó chỉ nên có một việc là update state. Nó chạy đồng bộ và một hàm bên trong một Mutations được gọi là một Commit.
3. Sử dụng VueX
Trên đây là các phần cốt lõi mà bạn nên nhớ, bây giờ chúng ta sẽ làm một ví dụ nhỏ nhỏ để hiểu thêm nhé!
Đầu tiên thì các bạn sẽ cần tạo một Vue app và cái VueX, bằng cách chạy lệnh sau: (Nếu các bạn chưa biết sao lại có lệnh vue thì hãy search Vue cli nhé)
+ vue create demo-vuex
+ yarn add vuex or npm install vuex
Khi các bạn đã xong rồi thì chúng ta sẽ cùng làm nhé. Đầu tiên chúng ta sẽ tạo ra một folder store và viết một file index.js:
Để sử dụng được file này chúng ta sẽ cần import và inject nó vào bên trong đối tượng Vue root. Các bạn chỉnh file main.js thành như sau:
Tiếp theo chúng ta sẽ cho hiện state trong store ra để xem thử. Hãy cùng tạo ra một component và import nó vào bên trong App component root.
Ở đây mình đang dùng mapState vì mình đang dùng nhiều hơn một state trong store, nếu các bạn dùng một cái thôi thì lên chuyển thành như thế này nhé:
Hãy so sánh 2 cách trên, bạn thấy cách nào đơn giản hơn? Câu trả lời là còn tùy, nếu không muốn viết thêm logic thì dùng cách đầu, còn nếu muốn viết thêm logic để hiện thì các bạn vẫn phải viết tường minh nó ra rồi chèn logic vào.
Tiếp theo, chúng ta sẽ cùng update store/index.js để xem tiếp actions và mutations hoạt động như thế nào.
Chúng ta hãy cùng change file store/index.js nhé, ở đây các bạn hãy chú ý phần actions và mutations:
Tiếp theo chúng ta sẽ change tiếp phần component nào!
Ở đây nếu như các bạn làm thành công, khi change usernameInput và click button [Change username] thì phần username của chúng ta sẽ được update. Còn nếu gặp lỗi gì thì hãy đừng ngần ngại comment dưới bài viết này để mình giải đáp nhé.
Tiếp theo, chúng ta sẽ xem tiếp getter chạy như thế nào nhé. Như phần trên mình đã giới thiệu thì đây là phần mà các logic xử lí, để có thể lấy ra state mà đã được tính toán. Các bạn viết getter nếu như nhiều component thì dùng lại hàm này nhé, còn không thì lấy state ra và tính lại ở từng component thôi.
Chúng ta sửa lại store/index.js thành như sau nhé:
Tiếp theo, để hiển thị ra bên ngoài chúng ta sẽ chỉnh file component thành như sau:
Ở đây các bạn cũng có thể dùng thêm tính năng của VueX để làm cho code được ngắn gọn hơn như là: mapGetters, mapActions , mapState, mapMutations. Thật là quá tiện đúng không?
4. Kết luận
Qua bài viết này, chắc hẳn các bạn đã có cái nhìn cơ bản nhất về VueX rồi đúng không? Tuy nhiên, bể học là vô biên, đây mới chỉ là một phần rất nhỏ mà bạn có thể làm với VueX thôi. Nhưng mình có thể tự tin đây là phần cốt lõi và quan trọng nhất, nếu các bạn nắm được những phần này rồi thì sẽ làm quen với dự án dùng VueX rất nhanh thôi.
Ngoài lề một chút thì tính đến thời điểm bây giờ có lẽ React vẫn là Framework phổ biến nhất, ngay sau nó chính là Vue. Còn Angular2+ thì ở cuối vì nó cồng kềnh và khó dùng hơn 2 thằng này. Vuex rất hữu dụng trong những dự án lớn, hãy học hỏi và sử dụng nó để giúp dự án của bạn vận hành trơn tru nhất nhé!
Nguồn tham khảo:
Nguyễn Xuân Sơn – CO-WELL Asia
