Vuex là gì

vuejs

60

vuex

1

Redux

8

I.Tại sao cần Vuex?

VueJS là một FramworkJS mới và đang ngày càng được đánh giá rất cao. VueJS được xây dựng dựa trên hệ thống component và việc truyền dữ liệu trực tiếp giữa các component giữa cha -con (parent-children components) vẫn còn nhiều hạn chế trong việc đồng bộ dữ liệu các biến toàn cục như việc user đã login hay chưa, username v.v..
Vì vậy cần giải pháp để giải quyết vấn đề xử lý và đồng bộ dữ liệu toàn cục. Nếu ai đã làm với React thì có lẽ cũng không lạ lẫm gì đến Redux.chính vì thế việc VueJS cũng cần một phương pháp để quản lý dữ liệu như Redux của React, và đó chính là VueX.

II.Vuex là gì?

VueX là 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, với nguyên tắc trạng thái chỉ có thể được thay đổi theo kiểu có thể dự đoán.

Vuex được xem như là một thư viện dùng để quản lý state cho các ứng dụng của Vue.
, sử dụng store tập trung hoá, và toàn cục cho tất cả component trong một ứng dụng, tận dụng hệ thống các phản ứng cho những cập nhanh tức thời.

Vuex store được xây dựng theo cách để không thể thay đổi trạng thái của nó từ bất kỳ component nào. Bảo đảm rằng trạng thái chỉ có thể biến đổi theo cách có thể dự đoán được. Do đó store của bạn trở thành một nguồn đáng tin: mỗi yếu tố dữ liệu chỉ được lưu một lần và chỉ cho phép đọc để tránh các component của ứng dụng không làm hỏng trạng thái được truy xuất từ các component khác. State được hiểu như là trạng thái của của ứng dụng. Ví dụ như app sẽ có state là đã login hay chưa.

III. Tác dụng của Vuex?

Trước tiên về Vue. Vue chia nhỏ state và quản lý trong từng component, điều này mang đến nhiều lợi ích như: dễ dùng lại code, giảm sự phức tạp của ứng dụng, việc test trở nên dễ dàng hơn… Nhưng một ngày đẹp trời có 3, 4… n component dùng chung một state thì phải làm sao?

Cách dễ dàng nhất là mỗi component đều sử dụng event send state ra ngoài để các component khác sử dụng và tự trigger khi state này thay đổi. Ngoài ra thì có thể tạo một component cha làm nơi trung chuyển state. Hai cách này đều làm cho workflow trở nên phức tạp hơn nhiều và khó có thể kiểm soát (điển hình nhất là khó khăn trong việc debug).

IV. Kiến trúc của Vuex

Với Vuex, state của ứng dụng được quản lý tập trung một chỗ được gọi là store, nó bao gồm 5 phần chính:

State
Getters
Mutation
Actions
Modules

1. State

State là một object chứa toàn bộ state của ứng dụng

const state = {
  numbers: [1, 2, 3, 4, 5]
}

2. Getters

Là một tập các hàm dùng để filter state ra được output như mong muốn.

const state = {
  getEvenNumbers: state => {
    return state.numbers.filter(item => item%2 === 0)
  }
  hasNumber : state => num => {
    return state.numbers.include(num)
  }
}

Để sử dụng trong component thì có thể gọi trực tiếp this.$store.getters.getEvenNumbers hoặc sử dụng mapGetter

3. Mutations

Store là nơi component chỉ có thể đọc dữ liệu và không thể thay đổi trạng thái một cách trực tiếp. Để thay đổi trạng thái thì Mutations sẽ đảm nhiệm chức năng này, đây là nơi duy nhất có thể thay đổi state. Mutations sẽ thực hiện thay đổi thông qua commit. Tại component cũng có thể thực hiện được commit đến mutations, tuy nhiên điều này không khuyến khích để đảm bảo Flow chuẩn mình sẽ nói ở dưới.
Một điều cần lưu ý là mutations là synchronous nhằm kiểm soát được action đã thay đổi state hay thứ tự thay đổi state như nào

const mutations = {
  add(state, num){
    return state.numbers.push(num)
  }
  remove(state, num) {
    return state.numbers.include(num)
  }
}

4. Actions

Action cũng tương tự như mutation, tuy nhiên có một vài điểm khác biệt, thay vì thay đổi trạng thái, action commit các thay đổi. Action có thể chứa các hoạt động không đồng bộ.
,là nơi thể hiện bussiness logic. Nó là nơi gọi API, save vào database, thực hiện các commit (gọi mutation) để thay đổi state…
VD: Thêm một số, nếu số đó đã tồn tạo trong state thì xoá rồi thêm lại.

const actions = {
  updateNum({commit, state}, num){
    if (state.includes(num)) {
      commit('remove', num)
    }
    commit('add', num)
  }

  foo ({dispatch}, num) {
    dispatch('updateNum', num)
  }
}

Ngược lại với mutation, action lại là asynchronous. Đơn giản là bởi vì các action có thể không có logic liên quan đến nhau.

4. Modules

Vuex sử dụng cây trạng thái duy nhất, tất cả các trạng thái của ứng dụng được đưa vào một đối tượng, như vậy khi ứng dụng phát triển lên, store có thể phình lên rất nhiều. Vuex cho phép chia nhỏ store thành các module nhỏ hơn, mỗi module cũng có state, mutation, action, getter và thậm chí còn cho phép các module lồng nhau.

Được xem như là store thu nhỏ, nó cũng bao gồm: state, mutation và action. Khi store phình quá to thì có thể chia nhỏ ra thành các module để dễ quản lý hơn.

V. Những điều cần lưu ý với Vuex

Xác định cái nào là state sẽ lưu trữ trong store, cái nào chỉ là local state chỉ nằm trong component. Tất nhiên là có để đưa tất cả vào store, nhưng đến khi quy mô ứng dụng tăng lên kéo theo store cũng sẽ phình to ra => việc quản lý state sẽ trở nên khó khăn hơn nhiều nhiều.

Kết luận

Nếu như bạn đã sử dụng vuejs và gặp vấn đề trong việc đồng bộ, hiển thị và update dữ liệu , data được sử dụng bởi nhiều component, vuex chính là giải pháp cho bạn. Các ứng dụng vuejs lớn hầu như đều cần sử dụng vuex để quản lý và xử lý thay đổi trạng thái hiệu quả nhất.
Đây chỉ là giới thiệu sơ lược về VueX, nếu bạn đã biết vể flux/redux, việc làm quen với vuex sẽ khá dễ dàng tuy nhiên nếu chưa có thể bạn đọc nó vẫn còn khá mơ hồ. Qua bài viết này, mong các bạn có được cái nhìn rõ ràng hơn về Vuex và tuỳ ứng dụng mà có thể sử dụng nó hợp lý. Những phần hướng dẫn chi tiết sẽ được giới thiệu trong các bài viết sau,