Tránh Prop Drilling trong Vue 3 với Composition API

Giới thiệu

Trong phát triển ứng dụng Vue 3, việc truyền props qua nhiều cấp độ component (prop drilling) có thể làm cho mã trở nên phức tạp và khó duy trì. Bài viết này sẽ hướng dẫn bạn cách tránh prop drilling bằng cách sử dụng Composition API và các kỹ thuật như Composables, Provide/Inject và Pinia. Chúng ta sẽ xây dựng một ứng dụng cơ bản sử dụng Mock.shop API để minh họa cho các kỹ thuật này.

Mục tiêu bài viết

• Giải thích khái niệm prop drilling và tại sao cần tránh nó.
• Hướng dẫn từng bước cách xây dựng ứng dụng Vue 3 với các kỹ thuật tránh prop drilling.
• Cung cấp ví dụ thực tế và mã nguồn rõ ràng.

Prop Drilling là gì?

Prop drilling là một vấn đề phổ biến trong các ứng dụng React và Vue, xảy ra khi bạn phải truyền dữ liệu từ component cha xuống component con qua nhiều cấp độ, kể cả những component không cần dữ liệu đó. Điều này không chỉ làm cho mã trở nên rối rắm mà còn làm giảm khả năng kiểm soát và bảo trì mã nguồn.

Tại sao nên tránh Prop Drilling?

• Dễ gây nhầm lẫn: Khi dữ liệu cần được truyền qua nhiều cấp, rất khó để theo dõi nguồn gốc của dữ liệu đó.
• Khó bảo trì: Khi ứng dụng phát triển, thêm hoặc chỉnh sửa một component có thể ảnh hưởng đến nhiều phần khác nhau của ứng dụng.
• Giảm khả năng tái sử dụng: Các component trở nên phụ thuộc vào cấu trúc của cây component.

Các kỹ thuật để tránh Prop Drilling

1. Sử dụng Composables

Composables là một cách tuyệt vời để tổ chức logic và chia sẻ trạng thái giữa các component mà không cần phải truyền props. Bằng cách sử dụng Composables, bạn có thể tạo ra các hàm tái sử dụng chứa logic mà bạn có thể gọi ở bất kỳ nơi nào trong ứng dụng.

Ví dụ Composable

// src/composables/useMockShopAPI.ts
import { ref } from 'vue';
import { createApiClient } from '@/api/ApiClient';

export function useMockShopAPI() {
  const apiData = ref(null);
  const apiError = ref(null);
  const apiClient = createApiClient();

  const fetchCollections = async () => {
    try {
      const response = await apiClient.get('/collections');
      apiData.value = response.data;
    } catch (error) {
      apiError.value = error.message;
    }
  };

  return { apiData, apiError, fetchCollections };
}

2. Sử dụng Provide/Inject

Provide/Inject là một cách tiếp cận mạnh mẽ trong Vue 3, cho phép bạn cung cấp dữ liệu từ component cha và các component con có thể truy cập mà không cần phải truyền props qua từng cấp.

Ví dụ sử dụng Provide/Inject

// src/pages/StoreView.vue
<script setup>
import { provide, ref } from 'vue';
const collectionEdges = ref([]);
provide('collectionEdges', collectionEdges);
</script>

3. Sử dụng Pinia

Pinia là một state management library cho Vue 3, cho phép bạn quản lý trạng thái toàn cục một cách dễ dàng và hiệu quả. Thay vì truyền props, bạn có thể sử dụng Pinia để truy cập và cập nhật trạng thái.

Ví dụ sử dụng Pinia

// src/stores/app.ts
import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', {
  state: () => ({ loading: false }),
  actions: {
    setLoading(value) {
      this.loading = value;
    }
  }
});

Xây dựng ứng dụng

Bước 1: Cài đặt dự án

Trước tiên, bạn cần cài đặt các thư viện cần thiết:

npm install vue@next pinia axios vuetify

Bước 2: Cấu trúc dự án

Hãy tạo cấu trúc thư mục cho dự án của bạn:

|-- src
  |-- api
  |-- composables
  |-- pages
  |-- router
  |-- stores
  |-- components

Bước 3: Tạo API Client

Tạo một API client để giao tiếp với Mock.shop API.

// src/api/ApiClient.ts
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://mock.shop/api',
  headers: { 'Content-Type': 'application/json' }
});

export default apiClient;

Bước 4: Tạo Component và Pages

Tạo các component và trang sử dụng Provide/Inject và Composables. Hãy xem qua cách các component tương tác với nhau mà không cần phải truyền props.

Bước 5: Kiểm tra ứng dụng

Chạy ứng dụng của bạn và kiểm tra các chức năng. Sử dụng npm run dev để khởi động máy chủ phát triển.

Thực hành tốt nhất

• Sử dụng Composables để tách biệt logic kinh doanh.
• Sử dụng Provide/Inject cho dữ liệu cần chia sẻ giữa các component.
• Sử dụng Pinia cho quản lý trạng thái toàn cục.

Những cạm bẫy phổ biến

• Không sử dụng đúng cách Provide/Inject có thể dẫn đến khó khăn trong việc hiểu và bảo trì mã nguồn.
• Lạm dụng Composables có thể dẫn đến khó theo dõi logic.

Mẹo tối ưu hóa hiệu suất

• Sử dụng lazy loading cho các component nặng.
• Tối ưu hóa các API gọi để giảm thiểu thời gian phản hồi.

Khắc phục sự cố

Nếu bạn gặp lỗi khi sử dụng Pinia, hãy kiểm tra xem bạn đã cấu hình đúng Store chưa và các actions có được gọi đúng cách không.

Kết luận

Tránh prop drilling trong Vue 3 không chỉ làm cho mã của bạn trở nên sạch sẽ hơn mà còn giúp dễ dàng bảo trì và mở rộng ứng dụng trong tương lai. Hãy áp dụng các kỹ thuật này trong dự án của bạn để nâng cao chất lượng mã nguồn. Nếu bạn có câu hỏi, đừng ngần ngại để lại câu hỏi bên dưới!

FAQ

1. Prop drilling là gì?
Prop drilling là khi bạn truyền dữ liệu qua nhiều cấp độ component, kể cả những component không cần dữ liệu đó.

2. Làm thế nào để tránh prop drilling?
Sử dụng Composables, Provide/Inject và Pinia là những cách hiệu quả để tránh prop drilling.

3. Pinia có gì khác biệt với Vuex?
Pinia là một state management library nhẹ hơn và dễ sử dụng hơn so với Vuex, đặc biệt trong Vue 3.

Tài nguyên tham khảo

• Vue 3 Documentation
• Pinia Documentation
• Axios Documentation
• Vuetify Documentation