Vue JS ngày 2 cài đặt VueX trong project VueJS

     Có 1 vấn đề muôn thuở anh em làm OOP chắc sẽ gặp là có 1 chức năng nào đó mà khi sài nhiều lần anh em lại code lại đoạn code đó đúng hơm hoặc là có 1 cái data nào đó mà phần này dùng tới phần sau cũng dùng tới  mà anh em không biết dùng bằng cách nào thì Vue có 1 thằng tên VueX nó làm được.

    Có 1 cái hình anh em xem qua nha 

Đọc tới bài này thì anh em cũng biết vue nó làm việc trên các component, tuy nhiên cái chưa biết là làm sau các component này chia sẽ trạng thái với nhau?

VueX ra đời với mục đích là thư viện để quản lý các trạng tháng của các component trong một ứng dụng

Phân tích chúc xíu

1 State: Trạng thái là nơi khởi nguồn để thực hiện ứng dụng.

2 View: Này gọi là khung nhìn là cái khai báo ánh xạ với trạng thái

3 Action: Hành động là cách thức làm trạng thái thay đổi phản ánh lại các cách nhập liệu của người dùng từ view

Đối với VueX thì sương sương mình có 5 phần chính

1. State

2. Getters

3. Mutaction

4. Actions

5. Modules

State (Trạng thái chính nơi tình yêu thăng hoa)

    Bạn có bao giờ tự hỏi làm cách nào mà VueX nó có thể dễ dàng xác định các trạng thái và tạo ra snapshot một cách đơn giản?
    Đó là vì nó chỉ sử dụng 1 cây trạng thái duy nhất để chứa tất cả các trạng thái của ứng dụng

Getters (Lọc trạng thái)

Thế điều gì làm cho VueX khác với Redux? đó là mình có thể điều chỉnh được dữ liệu trước khi trả về trạng thái của nó. Cũng có khi mình cần lấy trạng thái dựa vào việc tính toán, lọc bỏ các trạng thái được cung cấp bởi store:

Nhìn xuống thí dụ dưới đây

Mình muốn sữ dụng trong component thì mình có thể gọi trực tiếp 

this.$store.getters.getEventNumber hoặc là sài mapGetter cái nào cũng được

Mutations(Thay đổi trạng thái)

Store có điểm mạnh chính là nơi component chỉ có thể đọc dữ liệu mà không được phép thay đổi trạng thái 1 cách trực tiếp.

Nếu muốn thay đổi thì Mutations là nơi duy nhất đảm nhiệm chức năng này bằng cách thay đổi qua từ khóa commit 

Dù không ai khuyến khích đãm bảo tính Flow chuẩn  tuy nhiên tại component, mình có thể thực hiện được commit đến Mutations

Có 1 lưu ý lớn là Mutations là synchronous nhằm kiểm soát được action đã thay đổi state hay thứ tự thay đổi như thế nào

Actions (hành động)

Tương tự như Mutations, tuy nhiên có 1 vài khác biệt to lớn . Thay vì thay đổi trạng thái thì các action commit thay đổi, nó có thể chứa các hoạt động không đồng bộ

Mấu chốt của bussiness logic là ở đây, được gọi là API, save vào database thực hiện các commit (gọi mutations) để thay đổi state...

Thí dụ mình sẽ thêm 1 số vô, nếu có có trong trạng thái thì xóa bỏ thêm lại:

Modules

Như đã nói ở trên VueX chỉ có duy nhất 1 cây trạng thái tất cả các trạng thái của ứng dụng sẽ được đưa vào một đối tượng. Điều này có nghĩa là khi ứng dụng của bạn ngày càng lớn thì store sẽ lớn ra rất nhiều.

Vì thế Modules ra đời nhầm chia nhỏ store ra thành các module nhỏ hơn, các module này cũng phải có state, mutations, action, getter mà nhiều khi các module này cũng có các module nhỏ hơn lòng nhau.

Thế thì có lưu ý gì khi sài VueX không?

Quan trọng nhất là khi mình sài VueX là xác định cái nào là state sẽ lưu trữ trong store, cái nào là local state nằm trong component.

Mình hoàn toàn có thể bỏ hết tất cả vô store, nhưng khi có quá nhiều dữ liệu th2 store cũng to ra dẫn đến khó trong quản lý state.