Vuex là một mẫu quản lý trạng thái + thư viện cho các ứng dụng Vue.js. Nó hoạt động như một cửa hàng tập trung cho tất cả các component trong một ứng dụng, với các quy tắc đảm bảo rằng state chỉ có thể bị thay đổi theo kiểu hiển thị có thể đoán trước được. Nó cũng tích hợp với phần mở rộng devtools chính thức của Vue để cung cấp các tính năng nâng cao như gỡ lỗi thời gian không cấu hình zero-time và xuất/nhập nhanh state.
Hãy bắt đầu với một ứng dụng truy cập Vue đơn giản:
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
Nó là một ứng dụng khép kín với các phần sau:
- state, là nguồn gốc của sự thật thúc đẩy ứng dụng của ta;
- view, đó chỉ là một ánh xạ khai báo của state;
- actions, đó là những cách có thể mà state có thể thay đổi trong phản ứng với đầu vào của người dùng từ view.
Đây là sơ đồ biểu diễn cực kỳ đơn giản về khái niệm “luồng dữ liệu một chiều”:
Tuy nhiên, sự đơn giản nhanh chóng bị phá vỡ khi chúng ta có nhiều component cùng chia sẻ state chung:
- Nhiều view có thể phụ thuộc vào cùng một state.
- Các hành động từ các view khác nhau có thể cần phải biến đổi cùng một phần state.
Đối với vấn đề thứ nhất, việc truyền các props có thể trở nên đơn điệu cho các component lồng nhau nhiều cấp, và chỉ đơn giản là không làm việc cho các component cấp ngay dưới. Đối với vấn đề thứ hai, chúng ta thường thấy mình đang sử dụng các giải pháp như tiếp cận trực tiếp các đối tượng cha/con hoặc cố gắng biến đổi và đồng bộ hóa nhiều bản sao của state thông qua các sự kiện. Cả hai mẫu này đều dễ đổ vỡ và nhanh chóng dẫn đến mã không thể duy trì được.
Vậy tại sao chúng ta không trích xuất trạng thái chia sẻ ra khỏi các component, và quản lý nó trong một singleton global? Với điều này, cây component của chúng ta trở thành một “view” lớn, và bất kỳ component nào cũng có thể truy cập trạng thái hoặc các hành động kích hoạt, bất kể chúng ở đâu trong cây!
Ngoài ra, bằng cách xác định và tách các khái niệm liên quan đến quản lý state và thực thi các quy tắc nhất định, chúng ta cũng cung cấp cho mã của chúng ta có nhiều cấu trúc và khả năng bảo trì hơn.
Đây là ý tưởng cơ bản của Vuex, lấy cảm hứng từ Flux , Redux và The Elm Architecture. Không giống như các pattern khác, Vuex cũng là một thư viện triển khai được thiết kế riêng cho Vue.js để tận dụng lợi thế của hệ thống phản ứng hạt của nó để cập nhật hiệu quả.
Khi nào nên sử dụng Vuex?
Mặc dù Vuex giúp chúng ta đối phó với việc quản lý state chia sẻ, nó cũng đi kèm với chi phí của nhiều khái niệm và boilerplate. Đó là một sự cân bằng giữa năng suất ngắn hạn và dài hạn.
Nếu bạn chưa bao giờ xây dựng một SPA quy mô lớn và nhảy ngay vào Vuex, nó có thể cảm thấy khó hiểu và gặp khó khăn. Điều đó hoàn toàn bình thường – nếu ứng dụng của bạn đơn giản, rất có thể bạn sẽ không không cần có Vuex. Một mẫu store đơn giản có thể là tất cả những gì bạn cần. Nhưng nếu bạn đang xây dựng một SPA có quy mô vừa đến lớn, rất có thể bạn đã gặp phải tình huống khiến bạn suy nghĩ về cách xử lý tốt hơn state bên ngoài các component Vue của mình và Vuex sẽ là điều bạn cần nghĩ tới. Có một câu nói hay từ Dan Abramov, tác giả của Redux:
Flux libraries are like glasses: you’ll know when you need them.
