Quản lý trạng thái (state) với Vuex cho ứng dụng VueJS của bạn.

Cloud9 VN

3 years ago

1. Nguyên tắc của Vuex

Trước khi bắt đầu sử dụng Vuex, chúng ta cần hiểu rõ nguyên tắc của nó. Vuex là một thư viện quản lý state trong VueJS, được xây dựng dựa trên ý tưởng của Flux và Redux. Vuex có một store chứa tất cả state của ứng dụng, và các component VueJS có thể truy cập vào store này để lấy hoặc cập nhật state.

Quá trình thay đổi state trong Vuex phải đi qua một số quy tắc:

– State là bất biến (immutable), chỉ có thể thay đổi thông qua mutations.
– Mutations là các hàm đồng bộ (synchronous) để thay đổi state.
– Actions là các hàm bất đồng bộ (asynchronous) để cập nhật state thông qua mutations.

2. Best practices cho Vuex store

Chúng ta cần tổ chức Vuex store sao cho nó dễ bảo trì, dễ mở rộng và dễ sử dụng. Hãy xem xét một số best practices cho Vuex store:

– Tách Vuex store thành các modules: Khi ứng dụng của bạn phức tạp và có nhiều state khác nhau, bạn nên chia Vuex store thành các modules để quản lý state. Mỗi module có thể quản lý một phần của state, mutations, actions và getters của ứng dụng.

– Đặt tên cho Vuex store và các module: Để dễ dàng quản lý và tìm kiếm Vuex store và các module, bạn nên đặt tên cho chúng theo một chuẩn nhất định.

– Sử dụng các getters để truy xuất state: Getters là các hàm giúp bạn truy xuất các giá trị của state theo một cách dễ dàng và linh hoạt hơn. Getters cũng có thể được sử dụng để tính toán các giá trị mới từ state.

– Luôn sử dụng mutations để thay đổi state: Để đảm bảo tính nhất quán và bảo mật của ứng dụng, bạn nên sử dụng mutations để thay đổi state thay vì thay đổi trực tiếp.

– Sử dụng actions để gọi API hoặc thực hiện các hành động bất đồng bộ: Nếu bạn cần gọi một API hoặc thực hiện một hành động bất đồng bộ, bạn nên sử dụng actions thay vì mutations.

3. Tạo Vuex store

Để tạo Vuex store, bạn cần import Vuex và sử dụng hàm Vue.use() để đăng ký Vuex trong ứng dụng VueJS của bạn.

Sau đó, bạn có thể tạo một Vuex store với các thuộc tính state, mutations, actions và getters:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
})

export default store

4. Các module trong Vuex

Chúng ta có thể cấu trúc Vuex store thành các module để giảm thiểu sự phức tạp và tăng tính mô-đun hóa của ứng dụng. Mỗi module sẽ có các thuộc tính state, mutations, actions và getters riêng biệt.

Để tạo một module, bạn có thể sử dụng hàm Vuex.createModule() hoặc định nghĩa các thuộc tính state, mutations, actions và getters trong object module:

“`

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

5. Các mutations và actions trong Vuex

Tương tự như Redux, các mutations trong Vuex là các hàm đồng bộ để thay đổi state. Chúng ta không nên thực hiện các hành động bất đồng bộ trong mutations.

Ví dụ, để tăng giá trị của state.count và gọi một API để lưu trữ giá trị mới này, chúng ta nên sử dụng actions:

const actions = {
  async incrementAndSave ({ commit }, payload) {
    commit('increment')
    await api.saveCount(payload)
  }
}

const mutations = {
  increment (state) {
    state.count++
  }
}

6. Các getters trong Vuex

Getters được sử dụng để truy xuất giá trị của state trong Vuex store. Chúng ta có thể sử dụng getters để tính toán giá trị mới từ state.

Ví dụ, để tính tổng của state.count và một giá trị khác, chúng ta có thể sử dụng getters:

const getters = {
  totalCount (state) {
    return state.count + state.otherValue
  }
}

7. Sử dụng Vuex trong VueJS

Sau khi tạo được Vuex store và các module, chúng ta có thể sử dụng chúng trong component VueJS. Chúng ta sử dụng Vuex mapState, mapActions và mapGetters để truy xuất state, actions và getters của Vuex store.

Ví dụ, để truy xuất state.count từ module A, chúng ta có thể sử dụng:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('a', ['count'])
  }
}

Nếu chúng ta muốn sử dụng một getter từ module A, chúng ta có thể sử dụng:

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('a', ['getCount'])
  }
}

Nếu chúng ta muốn sử dụng một action từ module A, chúng ta có thể sử dụng:

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('a', ['incrementAsync'])
  }
}

Kết luận

Đó là những gì chúng ta cần biết về Vuex để quản lý state cho ứng dụng VueJS của bạn. Để thiết kế một Vuex store chất lượng, chúng ta cần tuân thủ những nguyên tắc cơ bản: state là immutable, mutations là synchronous và actions là asynchronous.

Chúng ta cũng cần áp dụng những best practices để tổ chức Vuex store thành các module và đặt tên các components, các mutations, actions và getters.

Nếu bạn cần hỗ trợ trong quá trình phát triển ứng dụng VueJS, hãy liên hệ với chúng tôi để có được sự giúp đỡ. Chúc bạn thành công!

Kỹ Năng tiếp theo trong Top 10: Tuyệt chiêu tối ưu hiệu suất VueJS: Lười tải, phân chia mã và lưu trữ đệm.

Xem: Top 10 kỹ năng mà vuejs dev phải biết