Các ứng dụng đều có xu hướng lớn dần lên và ngày càng trở nên phức tạp, vô hình chung điều đó phát sinh nhiều thành phần trạng thái (state) khác nhau và cũng phát sinh nhiều giao tiếp giữa các thành phần này. Vue cũng như bao frame work khác để giải quyết vấn đề trên nó cung cấp cho người dùng thư viện quản lý trạng thái chính thức. Bài viết dưới đây chúng ta sẽ tìm hiểu về Vuex thư viện quản lý trạng thái chính thức của Vue các bạn nhé!
Giải pháp chính thức theo kiến trúc Flux
Vuex lấy cảm hứng từ Elm. Vuex thậm chí còn được tích hợp vào vue-devtools, cung cấp tính năng time-travel debugging mà không cần phải cài đặt gì thêm.
Thông tin dành cho các lập trình viên React
Nếu bạn là tín đồ của React, có thể bạn đang thắc mắc không biết vuex và redux, giải pháp quản lí trạng thái theo kiến trúc Flux phổ biến nhất trong hệ sinh thái của React, giống và khác nhau như thế nào thì dưới đây sẽ là câu trả lời giành cho bạn.
Thật ra, Redux độc lập với view layer, và vì thế có thể dùng với Vue thông qua các ràng buộc đơn giản. Trong khi đó, vuex biết rằng nó đang được sử dụng trong một ứng dụng Vue. Điều này giúp vuex tích hợp tốt hơn với Vue, cung cấp API trực quan hơn và nâng cao trải nghiệp của lập trình viên.
Xây dựng bộ quản lí trạng thái đơn giản
Chúng ta thường quên rằng “source of truth” (nguồn chân lí, một khái niệm chỉ việc dữ liệu được truy xuất từ một nguồn duy nhất) trong một ứng dựng Vue là object data – một đối tượng Vue đơn giản chỉ proxy các truy xuất đến object này. Vì thế, nếu muốn có một trạng thái được chia sẻ giữa các đối tượng Vue khác nhau, bạn có thể làm như sau:
const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth })
Trong ví dụ này, mỗi khi sourceOfTruth được thay đổi, cả vmA và vmB đều sẽ cập nhật view một cách tự động. Các component bên trong hai đối tượng này cũng sẽ truy xuất được đến sourceOfTruth thông qua this.$root.$data. Bây giờ chúng ta đã có một “single source of truth,” tuy nhiên việc dò lỗi sẽ là ác mộng, vì bất cứ phần nào của ứng dụng cũng có thể chỉnh sửa được bất cứ dữ liệu nào vào bất kì lúc nào mà không để lại chút tung tích nào cả.
Để giải quyết vấn đề này, chúng ta sử dụng một store pattern:
var store = { debug: true, state: { message: 'Xin chào!' }, setMessageAction (newValue) { if (this.debug) console.log('setMessageAction được gọi với giá trị', newValue) this.state.message = newValue }, clearMessageAction () { if (this.debug) console.log('clearMessageAction được gọi') this.state.message = '' } }
Lưu ý việc tất cả các hành động (action) làm thay đổi trạng thái của store được chứa trong chính store. Cách quản lí trạng thái theo kiểu tập trung này giúp chúng ta hiểu được dạng thay đổi nào có thể xảy ra và được chúng gọi đến như thế nào. Bây giờ nếu có gì bất ổn, chúng ta cũng sẽ có log.
Thêm vào đó, mỗi đối tượng / component cũng có thể sở hữu và quản lí trạng thái cho riêng mình:
var vmA = new Vue({ data: { privateState: {}, sharedState: store.state } }) var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } })
