VueJS: Bắt đầu với Vuex

Trung tâm của mọi ứng dụng Vuex là store. Một "store" về cơ bản là một container chứa state ứng dụng của bạn. Có hai điều làm cho store Vuex khác với một đối tượng global đơn giản:

1. Store Vuex có tính phản ứng. Khi các component Vue lấy state từ nó, chúng sẽ phản ứng và cập nhật một cách có hiệu quả nếu state của store thay đổi.

2. Bạn không thể trực tiếp thay đổi state của store. Cách duy nhất để thay đổi state của store là bằng cách thực hiện một cách rõ ràng các biến đổi. Điều này đảm bảo rằng mọi thay đổi của state đều để lại một bản ghi có thể theo dõi và kích hoạt công cụ giúp chúng ta hiểu rõ hơn về các ứng dụng của chúng ta.

#Store đơn giản nhất

LƯU Ý: Chúng ta sẽ sử dụng cú pháp ES2015 cho các ví dụ mã lệnh. Nếu bạn chưa hiểu rõ về nó, nhấn đây!

Sau khi cài đặt Vuex, hãy tạo một store. Nó khá đơn giản - chỉ cần cung cấp một đối tượng state ban đầu và một số biến đổi (mutation):

// Hãy đảm bảo bạn gọi Vue.use(Vuex) trước tiên nếu sử dụng module hệ thống

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Bây giờ, bạn có thể truy cập đối tượng state dạng store.state, và kích hoạt thay đổi state bằng phương thức store.commit:

store.commit('increment')

console.log(store.state.count) // -> 1

Một lần nữa, lý do chúng ta cần thực hiện một mutation thay vì thay đổi store.state.count trực tiếp, là bởi vì chúng ta muốn theo dõi nó một cách rõ ràng. Quy ước đơn giản này làm cho ý định của bạn rõ ràng hơn, để bạn có thể giải thích về những thay đổi state trong ứng dụng của mình tốt hơn khi đọc mã. Ngoài ra, điều này mang lại cho chúng ta cơ hội để triển khai các công cụ có thể ghi lại mọi thay đổi, chụp nhanh state hoặc thậm chí thực hiện gỡ lỗi khi duyệt trang web.

Việc sử dụng store state trong một component đơn giản là liên quan đến việc trả về state trong một thuộc tính được tính toán, vì state của store là phản ứng (reactive). Các thay đổi kích hoạt đơn giản có nghĩa là thực hiện các mutation trong các phương thức component.

Đây là một ví dụ về ứng dụng truy cập Vuex cơ bản nhất.

Tiếp theo, chúng tôi sẽ thảo luận về mỗi khái niệm cốt lõi trong nhiều chi tiết tốt hơn, bắt đầu với State.