Vị trí MAP của các thành phần trong VUEX: Hướng dẫn chi tiết & Chuẩn SEO

Khi phát triển ứng dụng Vue.js, việc quản lý trạng thái (state management) là vô cùng quan trọng, đặc biệt với các ứng dụng quy mô lớn. Vuex là thư viện quản lý trạng thái tập trung dành cho Vue.js, giúp bạn tổ chức và quản lý dữ liệu ứng dụng một cách hiệu quả. Một trong những khái niệm cơ bản nhưng thiết yếu khi làm việc với Vuex là vị trí MAP của các thành phần trong component. Hiểu rõ cách các thành phần của Vuex được ánh xạ (map) vào các thuộc tính của component sẽ giúp bạn viết code gọn gàng, dễ bảo trì và tối ưu hơn.

1. Map State và Getters vào Computed Properties

Trong Vuex, State (trạng thái) chứa dữ liệu ứng dụng của bạn, trong khi Getters cho phép bạn truy cập dữ liệu đã được tính toán từ State. Để sử dụng State và Getters trong các Vue component, chúng ta sẽ map chúng vào các thuộc tính computed của component.

Lý do Map vào Computed:

• Tính phản ứng (Reactivity): Computed properties có tính chất phản ứng. Khi State hoặc dữ liệu mà Getters phụ thuộc vào thay đổi, computed property tương ứng sẽ tự động cập nhật, giúp giao diện người dùng luôn đồng bộ với dữ liệu.
• Caching (Bộ nhớ đệm): Computed properties được lưu vào bộ nhớ đệm dựa trên các phần phụ thuộc của chúng. Chúng chỉ tính toán lại khi một trong các phần phụ thuộc thay đổi. Điều này giúp tối ưu hiệu suất, tránh việc tính toán lại không cần thiết.
• Code sạch sẽ hơn: Thay vì truy cập $store.state.someData hoặc $store.getters.someComputedData lặp đi lặp lại trong template hoặc script, việc map chúng vào computed properties giúp bạn sử dụng chúng như những thuộc tính thông thường của component (this.someData).

Cách Map:

Vuex cung cấp các helper function như mapState và mapGetters để đơn giản hóa quá trình này.

import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    // Map State
    ...mapState([
      'count', // Ánh xạ this.count đến store.state.count
      'products'
    ]),
    // Hoặc đổi tên:
    // ...mapState({
    //   myCount: 'count' // Ánh xạ this.myCount đến store.state.count
    // }),

    // Map Getters
    ...mapGetters([
      'totalPrice', // Ánh xạ this.totalPrice đến store.getters.totalPrice
      'activeUsers'
    ]),
    // Hoặc đổi tên:
    // ...mapGetters({
    //   cartTotal: 'totalPrice' // Ánh xạ this.cartTotal đến store.getters.totalPrice
    // })
  }
};

2. Map Actions và Mutations vào Methods

Trong Vuex, Mutations là cách duy nhất để thay đổi State một cách đồng bộ, trong khi Actions được sử dụng để thực hiện các thao tác bất đồng bộ và sau đó commit Mutations. Để kích hoạt các Actions và Mutations từ component, chúng ta sẽ map chúng vào các thuộc tính methods của component.

Lý do Map vào Methods:

• Kích hoạt thao tác: Methods trong component được sử dụng để chứa các hàm xử lý sự kiện hoặc các logic nghiệp vụ. Việc map Actions và Mutations vào methods giúp bạn gọi chúng một cách trực quan khi người dùng tương tác với giao diện hoặc khi có sự kiện xảy ra.
• Truyền tham số dễ dàng: Khi gọi một action hoặc mutation đã được map, bạn có thể truyền các payload (tham số) một cách trực tiếp như khi gọi một hàm thông thường.
• Tính tổ chức: Giúp phân biệt rõ ràng giữa việc truy xuất dữ liệu (computed) và thay đổi dữ liệu (methods).

Cách Map:

Vuex cung cấp các helper function như mapActions và mapMutations để đơn giản hóa quá trình này.

import { mapActions, mapMutations } from 'vuex';

export default {
  methods: {
    // Map Mutations
    ...mapMutations([
      'increment', // Ánh xạ this.increment() đến store.commit('increment')
      'decrement'
    ]),
    // Hoặc đổi tên:
    // ...mapMutations({
    //   add: 'increment' // Ánh xạ this.add() đến store.commit('increment')
    // }),

    // Map Actions
    ...mapActions([
      'fetchUsers', // Ánh xạ this.fetchUsers() đến store.dispatch('fetchUsers')
      'loginUser'
    ]),
    // Hoặc đổi tên:
    // ...mapActions({
    //   getUsers: 'fetchUsers' // Ánh xạ this.getUsers() đến store.dispatch('fetchUsers')
    // })
  }
};

3. Lắng nghe Computed Properties bằng Watch trong Component

Mặc dù State và Getters được map vào computed properties, bạn vẫn có thể sử dụng thuộc tính watch của component để lắng nghe sự thay đổi của các computed properties này. Điều này hữu ích khi bạn cần thực hiện các tác vụ phụ (side effects) dựa trên sự thay đổi của dữ liệu được quản lý bởi Vuex.

Trường hợp sử dụng:

• Thực hiện gọi API khi một giá trị computed thay đổi.
• Hiển thị thông báo (toast, alert) khi một trạng thái cụ thể được cập nhật.
• Lưu dữ liệu vào Local Storage khi một giỏ hàng (cart) thay đổi.

Ví dụ:

export default {
  computed: {
    ...mapState(['status']),
    ...mapGetters(['isAdmin'])
  },
  watch: {
    // Lắng nghe sự thay đổi của computed property 'status'
    status(newStatus, oldStatus) {
      console.log(`Status changed from ${oldStatus} to ${newStatus}`);
      if (newStatus === 'loggedIn') {
        // Thực hiện hành động khi người dùng đăng nhập
        this.$router.push('/dashboard');
      }
    },
    // Lắng nghe sự thay đổi của computed property 'isAdmin'
    isAdmin(newVal, oldVal) {
      if (newVal) {
        console.log('User is now an admin!');
      }
    }
  }
};

Kết luận

Việc nắm vững cách map các thành phần của Vuex (State, Getters, Actions, Mutations) vào các thuộc tính computed và methods của Vue component là nền tảng để xây dựng các ứng dụng Vue.js với Vuex một cách hiệu quả. Điều này không chỉ giúp code của bạn trở nên gọn gàng, dễ đọc và dễ bảo trì hơn mà còn tận dụng tối đa tính năng reactivity và caching của Vue, mang lại trải nghiệm tốt hơn cho người dùng. Đồng thời, khả năng watch các computed properties cung cấp thêm sự linh hoạt để xử lý các tác vụ phụ dựa trên sự thay đổi của trạng thái ứng dụng.

Bạn có câu hỏi nào khác về Vuex không?