Thoát khỏi việc khoan Vue Prop với Cung cấp/Tiêm

Vue cung cấp một số cách quản lý luồng dữ liệu và liên lạc giữa các thành phần. Một thách thức phổ biến với tư cách là nhà phát triển Vue là prop Drill, trong đó bạn truyền dữ liệu qua nhiều lớp thành phần khác nhau, dẫn đến một cơ sở mã phức tạp và khó bảo trì hơn.

Vue cung cấp cơ chế cung cấp/chèn, đóng vai trò như một giải pháp tinh tế để quản lý giao tiếp dữ liệu giữa các thành phần cha mẹ và các thành phần con được lồng sâu thông qua khả năng chèn phụ thuộc của nó.

Tìm hiểu vấn đề khoan Prop

Trước khi khám phá các biện pháp khắc phục được cung cấp bởi phương pháp cung cấp và tiêm, điều bắt buộc là phải hiểu được tình trạng khó khăn hiện tại. Quá trình khoan thủng diễn ra bất cứ khi nào có yêu cầu truyền thông tin từ thành phần gốc cấp cao hơn đến thực thể con được nhúng nội tại nằm bên trong.

Để các phần tử trung gian trong cấu trúc phân cấp này thực hiện được mục đích của mình, chúng cần phải vừa nhận và truyền dữ liệu, bất kể chúng có sử dụng dữ liệu đó hay không. Để chuyển thông tin từ phần tử cha sang phần tử con, người ta phải cung cấp dữ liệu nói trên dưới dạng thuộc tính cho các thành phần Vue tương ứng của chúng.

Hãy xem cấu trúc phân cấp của các thành phần nói trên như một mô hình để minh họa:

⭐ Ứng dụng

⭐Thành phần gốc

⭐ Thành phần con

⭐Thành phần trẻ em lớn

Trong một số trường hợp nhất định khi dữ liệu phải được truyền từ thành phần Ứng dụng đến GrandChildComponent, cần phải truyền thông tin này quaProps, bất kể các thành phần trung gian này có yêu cầu dữ liệu đó để hoạt động phù hợp hay không. Do đó, cách làm này có thể dẫn đến tình trạng phình to mã tăng lên và cản trở quá trình gỡ lỗi.

Cung cấp/Tiêm là gì?

Vue giải quyết thách thức này bằng

Thành phần nhà cung cấp

Thành phần Nhà cung cấp đóng vai trò là nguồn thông tin và chức năng được chia sẻ cho các thành phần con của nó, sử dụng tùy chọn “cung cấp” để truyền các tài nguyên đó đến các thành phần con của nó. Ví dụ: lấy hình minh họa sau đây về Thành phần nhà cung cấp:

 <!-- App.vue -->
<template>
  <div>
    <!-- ... -->
    <ParentComponent/>
  </div>
</template>

<script setup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';

const greeting = 'Hello from Provider';

provide('greeting', greeting);
</script>

Đoạn văn đã cho mô tả một thành phần Nhà cung cấp trong JavaScript, thành phần này cung cấp trạng thái hoặc giá trị chung giữa các thành phần con của nó. Để một thành phần nhận được dữ liệu được chia sẻ này, nó phải được gán một mã định danh duy nhất bằng thuộc tính’key’. Bằng cách gán khóa có cùng tên với biến được cung cấp, nó sẽ nâng cao khả năng đọc và bảo trì tổng thể của cơ sở mã.

Thành phần con cháu

Các thành phần được kế thừa hoặc lồng nhau có khả năng sử dụng và cung cấp dữ liệu thông qua các phiên bản thành phần tương ứng của chúng, được phân loại là các thành phần con cháu. Điều này được thực hiện bằng cách thực hiện các bước cần thiết được nêu dưới đây:

 <script setup>
import { inject } from 'vue';

const injectedData = inject('greeting');
</script>

Thành phần con truyền thông tin được cung cấp và có thể truy xuất thông tin đó trong bố cục của nó dưới dạng thực thể được phân tách cục bộ.

Bây giờ, hãy xem xét hình ảnh dưới đây:

Trong mô tả này, có một cơ cấu tổ chức bao gồm bốn yếu tố cấu thành, bắt đầu với một yếu tố cơ bản hoạt động như điểm khởi đầu. Các thành phần còn lại được sắp xếp theo thứ bậc và đạt đến đỉnh cao trong thực thể Con cháu cấp dưới.

Bằng cách sử dụng thành phần GrandChild làm trung gian giữa thành phần Ứng dụng và các thành phần chính hoặc con của nó, bạn sẽ đạt được phương pháp truyền dữ liệu hiệu quả hơn. Điều này giúp loại bỏ nhu cầu truyền dữ liệu qua các thành phần trung gian vốn không yêu cầu dữ liệu đó hoạt động phù hợp, từ đó hợp lý hóa hoạt động giao tiếp trong ứng dụng.

Cung cấp dữ liệu ở cấp độ ứng dụng (Toàn cầu)

Tính năng cung cấp/tiêm của Vue cho phép cung cấp dữ liệu ở cấp ứng dụng, đóng vai trò là phương pháp phổ biến để phổ biến thông tin và cấu hình giữa các thành phần khác nhau xen kẽ trong ứng dụng Vue của một người.

Hãy xem xét trường hợp sau trong đó dữ liệu được cung cấp trên cơ sở toàn nền tảng:

 // main.js

import { createApp } from 'vue'
import App from './App.vue'

const globalConfig = {
  apiUrl: 'https://example.com/api',
  authKey: 'my-secret-key',
  // Other configuration settings...
};

app.provide('globalConfig', globalConfig);

createApp(App).mount('#app')

Hãy xem xét tình huống trong đó ứng dụng cần có kho lưu trữ cấu hình toàn diện bao gồm nhiều khía cạnh khác nhau như Giao diện lập trình ứng dụng (API), thông tin xác thực người dùng và các tham số bổ sung.

Một cách tiếp cận để thực hiện điều này là kết hợp thông tin cấu hình làm thuộc tính của thành phần chính, thường được tìm thấy trong tệp main.js, từ đó cho phép các phần tử phụ truy cập và sử dụng nó.

 <template>
  <div>
    <h1>API Settings</h1>
    <p>API URL: {{ globalConfig.apiUrl }}</p>
    <p>Authentication Key: {{ globalConfig.authKey }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const globalConfig = inject('globalConfig');
</script>

Thành phần nói trên sử dụng hàm inject để có quyền truy cập vào đối tượng globalConfig , được ứng dụng cung cấp trên toàn cầu. Bằng cách sử dụng các kỹ thuật liên kết dữ liệu khác nhau có sẵn trong Vue, người ta có thể truy xuất và thao tác liền mạch bất kỳ thuộc tính hoặc cấu hình nào được lưu trữ trong đối tượng globalConfig.

Lợi ích và Công dụng của Cung cấp và Tiêm

Việc cung cấp các dịch vụ bằng chức năng cung cấp/tiêm của Vue mang lại một số lợi ích, bao gồm giao tiếp hiệu quả giữa các thành phần và tính mô-đun trong phát triển ứng dụng. Ngoài ra, nó tạo điều kiện thuận lợi cho việc chia sẻ dữ liệu giữa các phần khác nhau của ứng dụng, tạo ra một cơ sở mã có tổ chức và hợp lý hơn.

Mã sạch hơn và tối ưu hóa hiệu suất hơn

Bằng cách sử dụng phương pháp cung cấp hoặc chèn các phần phụ thuộc, chúng tôi có thể loại bỏ yêu cầu các thành phần trung gian chuyển tiếp dữ liệu không liên quan đến chức năng của chúng. Cách tiếp cận này dẫn đến một cơ sở mã hợp lý và dễ quản lý hơn bằng cách giảm thiểu việc khai báo thuộc tính dư thừa.

Hệ thống phản ứng của Vue được thiết kế sao cho các thành phần chỉ được cập nhật khi có thay đổi trong các phần phụ thuộc liên quan của chúng. Cơ chế được cung cấp/chèn tạo điều kiện thuận lợi cho việc chia sẻ dữ liệu hiệu quả, giúp nâng cao hiệu suất thông qua việc giảm thiểu số lần hiển thị không cần thiết.

Cải thiện việc đóng gói thành phần

Việc triển khai cung cấp/tiêm tăng cường việc đóng gói các thành phần riêng lẻ bằng cách yêu cầu các thành phần con chỉ quan tâm đến thông tin mà chúng có chủ ý sử dụng. Điều này làm giảm sự phụ thuộc của các thành phần này vào cách sắp xếp dữ liệu cụ thể của các phần tử gốc của chúng.

Bằng cách triển khai phần tử bộ chọn ngày sử dụng các tùy chọn định dạng ngày cụ thể theo miền địa phương, có thể thiết lập sự khác biệt rõ ràng hơn giữa các mối quan tâm bằng cách cung cấp các cấu hình này thông qua thành phần bao gồm thay vì truyền chúng qua props. Cách tiếp cận này thúc đẩy sự gắn kết và mô đun hóa được cải thiện.

Chèn phụ thuộc

Việc cung cấp hoặc chèn các phần phụ thuộc thông qua tính năng chèn phụ thuộc đóng vai trò như một phương tiện đơn giản để triển khai các dịch vụ và cấu hình toàn cầu như ứng dụng khách API, điểm cuối, tùy chọn người dùng hoặc kho dữ liệu mà bất kỳ thành phần nào cần chúng đều có thể truy cập dễ dàng. Cách tiếp cận này giúp duy trì tính nhất quán trong suốt ứng dụng.

Những điểm cần lưu ý khi sử dụng Cung cấp và Tiêm

Mặc dù có nhiều lợi ích nhưng người ta phải thận trọng khi sử dụng phương pháp cung cấp và tiêm để ngăn chặn bất kỳ hậu quả không mong muốn nào phát sinh.

Việc sử dụng cung cấp/chèn là rất quan trọng trong việc phổ biến thông tin và chức năng quan trọng đi qua toàn bộ cấu trúc phân cấp, chẳng hạn như cấu hình hoặc API chính. Tuy nhiên, việc phụ thuộc quá nhiều vào phương pháp này có thể dẫn đến mối quan hệ qua lại quá phức tạp giữa các thành phần.

Để tạo điều kiện thuận lợi cho việc hiểu và duy trì các thành phần riêng lẻ, đặc biệt là trong cài đặt cộng tác, điều quan trọng là phải ghi lại các dịch vụ được cung cấp bởi phần tử gốc và các phụ thuộc được yêu cầu bởi các phần tử phụ của nó.

Bạn nên thận trọng khi thiết lập sự phụ thuộc vòng tròn giữa các thành phần, đặc biệt trong trường hợp thành phần con cung cấp một phần tử mà sau đó được thành phần cha mẹ của nó sử dụng. Sự sắp xếp như vậy có thể dẫn đến những vấn đề và trục trặc không lường trước được.

Cung cấp/Tiêm có phải là lựa chọn tốt nhất để quản lý trạng thái trong Vue không?

Một lợi thế đáng chú ý được cung cấp bởi các tính năng cung cấp và tiêm của Vue là khả năng hỗ trợ quản lý hiệu quả luồng dữ liệu và trạng thái ứng dụng trên nhiều thành phần khác nhau. Tuy nhiên, những lợi ích này không phải là không có nhược điểm, vì việc sử dụng cung cấp và tiêm có thể gây khó khăn trong việc gỡ lỗi, kiểm tra và bảo trì các hệ thống phần mềm phức tạp.

Pinia, một giải pháp quản lý trạng thái được đánh giá cao dành cho các ứng dụng Vue, cung cấp một phương pháp toàn diện và có cấu trúc tốt để xử lý các trạng thái phức tạp trong các chương trình này. Kho lưu trữ tập trung và hệ thống bảo mật về mặt đánh máy do Pinia cung cấp giúp đơn giản hóa quá trình tạo ứng dụng Vue đồng thời nâng cao khả năng truy cập và hiệu quả.