Vuex là một library + state management pattern cho các ứng dụng Vue.js. Nó phục vụ như một kho lưu trữ tập trung cho tất cả các thành phần trong một ứng dụng, với các quy tắc đảm bảo rằng trạng thái chỉ có thể được thay đổi theo cách có thể đoán trước được.

1. Các Vuex store đều reactive. Khi các thành phần Vue.js truy xuất trạng thái từ nó, chúng sẽ cập nhật nhanh chóng và hiệu quả nếu trạng thái của store thay đổi.
2. Bạn không thể thay đổi trực tiếp trạng thái của store. Cách duy nhất để thay đổi trạng thái của store là commiting mutation một cách rõ ràng . Điều này đảm bảo mọi thay đổi trạng thái đều để lại một bản ghi có thể theo dõi và cho phép tạo công cụ để hiểu rõ hơn về các ứng dụng của mình.

Mình tóm gọn lại:

Một ứng dụng sẽ có quá nhiều các trạng thái (state) cần quản lý. Các state này sẽ được quản lý trong Vuex dưới dạng các store theo mô hình state management pattern (Giống như Redux bên React). Không thể thay đổi trực tiếp trạng thái của store mà cần phải commit để thay đổi.

Chúng ta cùng xem qua ví dụ đơn giản sau về Vuex.

Ứng dụng đơn giản với Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

Chúng ta có thể truy cập tới thông qua state.count và thay đổi trạng thái thông qua store.commit

store.commit('increment')

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

Ở những bài trước, chúng ta có những cách để thay đổi trạng thái ứng dụng bằng cách bắt các component giao tiếp với nhau. Tuy nhiên, trong một số trường hợp mà việc này khiến cho ứng dụng của bạn trở nên rối rắm và khó khăn trong việc quản lý chúng. Giờ đây với Vuex, ta có thể thống nhất việc đó, ta có thể “inject” tới toàn bộ các child component bởi việc khai báo tại component cha của nó.

new Vue({
  el: '#app',
  store: store,
})

Từ đó, ta hoàn toàn có thể thay đổi trạng thái bên trong component con của nó:

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

Dễ dàng hơn việc bắn message, emit các thứ đúng không nào! Việc thay đổi thông qua commit thay vì trực tiếp gán giá trị cho store.state.count giúp dễ dàng quản lý và theo dõi sự thay đổi của trạng thái. Việc sử dụng trạng thái lưu trữ trong một thành phần chỉ liên quan đến việc trả về trạng thái trong computed property, vì tính reactive của nó. Việc kích hoạt các thay đổi chỉ đơn giản là tạo ra các đột biến trong các phương thức thành phần.

Trong bài viết tiếp theo mình sẽ đi sâu hơn về Vuex, các thành phần bên trong của store và ý nghĩa của chúng. Mong được mọi người đón đọc và ủng hộ!