Quản lý State với Vuex trong Vue.js - Hướng dẫn và ví dụ cụ thể

Vuex là một thư viện quản lý trạng thái cho ứng dụng Vue.js, giúp bạn quản lý và đồng bộ hóa dữ liệu trên các thành phần khác nhau trong ứng dụng của mình. Vuex triển khai kiến trúc Flux, giúp quản lý trạng thái ứng dụng một cách dễ dàng và hiệu quả.

Các khái niệm quan trọng trong Vuex bao gồm

1. State

Trạng thái (State) trong Vuex đại diện cho kho lưu trữ dữ liệu trung tâm cho ứng dụng của bạn. Nó chứa dữ liệu của ứng dụng cần được chia sẻ giữa các thành phần khác nhau. Dưới đây là ví dụ về định nghĩa trạng thái trong Vuex:

// Kho lưu trữ trạng thái
const store = new Vuex.Store({
  state: {
    count: 0, // Ví dụ trạng thái đếm
    user: null // Ví dụ trạng thái người dùng
  }
})

2. Getters

Getter trong Vuex cho phép bạn truy cập vào trạng thái và tính toán giá trị dẫn xuất từ trạng thái đó. Nó giúp bạn lấy dữ liệu từ trạng thái một cách thuận tiện và có thể sử dụng nó trong các thành phần khác nhau. Dưới đây là một ví dụ về sử dụng Getter trong Vuex:

// Định nghĩa Getter
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2 // Getter tính toán giá trị đếm gấp đôi
  }
})

3. Mutations

Mutations là các hàm trong Vuex được sử dụng để thay đổi trạng thái. Chúng chỉ có thể được thực hiện bởi các hành động (actions) và không thể gọi trực tiếp từ các thành phần. Mutations giúp đảm bảo rằng việc thay đổi trạng thái được thực hiện theo cách đồng bộ và có thể theo dõi. Dưới đây là một ví dụ về việc định nghĩa và sử dụng Mutations trong Vuex:

// Định nghĩa Mutations
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++ // Mutations tăng đếm lên 1
  }
})

// Sử dụng Mutations
store.commit('increment') // Gọi Mutations để tăng đếm

4. Actions

Actions trong Vuex được sử dụng để xử lý các hành động bất đồng bộ, như gọi API hoặc thực hiện các thay đổi không đồng bộ khác vào trạng thái. Actions có thể gọi Mutations để thay đổi trạng thái. Dưới đây là một ví dụ về việc định nghĩa và sử dụng Actions trong Vuex:

// Định nghĩa Actions
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment') // Gọi Mutations để tăng đếm sau 1 khoảng thời gian
      }, 1000)
    }
  }
})

// Sử dụng Actions
store.dispatch('incrementAsync') // Gọi Actions để tăng đếm bất đồng bộ

Để cài đặt Vuex trong dự án Vue.js của bạn, bạn có thể làm theo các bước sau

Bước 1: Cài đặt Vuex qua npm hoặc yarn:

npm install vuex

hoặc

yarn add vuex

Bước 2: Tạo file store.js trong thư mục gốc của dự án. Đây là nơi chúng ta sẽ khai báo và quản lý trạng thái của ứng dụng.

Bước 3: Trong file store.js, import Vuex và tạo một đối tượng store mới:

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

Vue.use(Vuex);

const store = new Vuex.Store({
  // Khai báo các trạng thái, getters, mutations và actions ở đây
});

export default store;

Bước 4: Trong file main.js, import store và liên kết nó với ứng dụng Vue:

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

Bước 5: Bây giờ bạn đã cài đặt và sẵn sàng sử dụng Vuex trong dự án của mình. Bạn có thể khai báo các trạng thái, getters, mutations và actions trong file store.js và sử dụng chúng trong các component Vue của bạn.

Ví dụ:

Trong file store.js, bạn có thể khai báo một trạng thái và một mutation đơn giản như sau:

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

Trong component Vue, bạn có thể sử dụng trạng thái và mutation bằng cách sử dụng các hàm mapState và mapMutations:

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};

Với các bước trên, bạn đã cài đặt Vuex thành công và có thể sử dụng nó để quản lý trạng thái của ứng dụng Vue.js của mình.

Với Vuex, bạn có thể quản lý trạng thái ứng dụng một cách dễ dàng và nhất quán. Nó giúp tăng tính dễ bảo trì và tái sử dụng của mã nguồn, đồng thời cung cấp cách tiếp cận có cấu trúc để quản lý dữ liệu.