使用 Provide/Inject 擺脫 Vue Prop 鑽探

Vue 提供了多種管理資料流和元件之間通訊的方法。 Vue 開發人員面臨的一個常見挑戰是道具鑽探，即透過各個元件層傳遞數據，導致程式碼庫複雜且難以維護。

Vue 提供了提供/注入機制，這是一種優雅的解決方案，透過其依賴注入功能來管理父元件和深度嵌套子元件之間的資料通訊。

了解支柱鑽井問題

在探索供應和注入方法提供的補救措施之前，必須了解當前的困境。每當需要將資訊從上級父組件傳輸到內部嵌入的子實體時，就會發生射孔鑽孔。

為了使該層次結構中的中間元素實現其目的，它們必須接收和傳輸數據，無論它們是否使用數據。為了將資訊從父元素傳輸到子元素，必須將所述資料作為屬性提供給它們各自的 Vue 元件。

將上述組件的層次結構視為模型，它可以說明:

⭐ 應用程式

⭐ 父組件

⭐ 子組件

⭐孫子組件

在必須將資料從 App 元件傳輸到 GrandChildComponent 的某些情況下，有必要透過 Props 傳輸此訊息，無論這些中間元件是否需要此類資料才能實現其正常功能。因此，這種做法可能會導致程式碼膨脹增加並阻礙調試過程。

什麼是提供/注入?

Vue 透過以下方式解決了這個挑戰

提供者元件

提供者元件可作為其子元件的共享資訊和功能的來源，利用「提供」選項將此類資源傳遞給其子元件。例如，以下圖所示的提供者元件:

 <!-- 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>

給定的段落描述了 JavaScript 中的 Provider 元件，它在其子元件之間提供共享狀態或值。為了讓元件接收此共享數據，必須使用「key」屬性為其指派唯一識別碼。透過為鍵分配與提供的變數同名的鍵，可以增強程式碼庫的整體可讀性和可維護性。

後代組件

繼承或嵌套組件具有透過其各自的組件實例利用和提供資料的能力，這些實例被分類為後代組件。這是透過實施下述必要步驟來實現的:

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

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

後代組件注入所提供的信息，並可以在其佈局中將其檢索為本地分隔的實體。

現在，考慮下圖:

在這個描述中，有一個由四個組成要素組成的組織結構，從一個作為起始點的基本要素開始。其餘組件依層次排列並最終形成從屬後代實體。

透過利用GrandChild元件作為App元件與其父元件或子元件之間的中介，實現了更有效的資料傳輸方法。這消除了資料透過不需要資料來實現正常功能的中間元件的需要，從而簡化了應用程式內的通訊。

在應用程式（全域）層級提供數據

Vue 的提供/注入功能允許在應用程式層級提供數據，這是在 Vue 應用程式中散佈的各種元件之間傳播訊息和配置的流行方法。

考慮以下實例，其中資料是在平台範圍內提供的:

 // 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')

考慮這樣一種場景，其中應用程式需要一個全面的配置儲存庫，其中包含各種方面，例如應用程式介面 (API)、使用者身份驗證憑證和其他參數。

實現此目的的一種方法是將設定資訊合併為主要元件的屬性（通常在 main.js 檔案中找到），從而使輔助元素能夠存取和使用它。

 <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>

上述元件利用「inject」函數來存取「globalConfig」對象，該對象由應用程式全域提供。透過採用 Vue 中可用的各種資料綁定技術，人們可以無縫檢索和操作儲存在「globalConfig」物件中的任何屬性或配置。

提供和注入的好處和用途

透過 Vue 的提供/注入功能提供服務具有多種優勢，包括組件之間的高效通訊和應用程式開發中的模組化。此外，它還有助於在應用程式的不同部分之間共享數據，從而產生更加精簡和組織良好的程式碼庫。

更乾淨、效能更優化的程式碼

透過利用提供或註入依賴項的做法，我們可以消除中間元件轉發與其功能無關的資料的要求。這種方法透過最大限度地減少冗餘屬性聲明來實現更加精簡和易於管理的程式碼庫。

Vue 的反應性系統的設計使得元件僅在其關聯依賴項發生變化時才會更新。提供/注入機制有利於資料的有效共享，從而透過最小化不必要的渲染來增強效能。

改進的元件封裝

提供/注入的實作透過要求子元件只關心它們有意使用的資訊來增強單一元件的封裝。這減少了這些元件對其父元素的特定資料排列的依賴性。

透過實現利用特定於區域設定的日期格式首選項的日期選擇器元素，可以透過包含元件提供這些配置而不是透過 props 傳輸它們，從而在關注點之間建立更明顯的區別。這種方法促進了內聚性和模組化的提高。

依賴注入

透過相依性注入提供或註入相依性是實現 API 用戶端、端點、使用者首選項或資料儲存等全域服務和配置的直接方法，任何需要它們的元件都可以輕鬆存取它們。這種方法有助於保持整個應用程式的一致性。

使用 Provide 和 Inject 時要考慮的要點

儘管它有很多好處，但在使用供給和注入方法時必須小心謹慎，以防止任何意想不到的後果。

提供/注入的利用對於傳播遍歷整個層次結構的重要資訊和功能（例如配置或關鍵 API）至關重要。然而，過度依賴這種方法可能會導致組件之間的相互關係過於複雜。

為了促進各個元件的理解和維護，特別是在協作環境中，記錄父元素提供的服務及其從屬元素所需的依賴關係非常重要。

建議在組件之間建立循環依賴關係時謹慎行事，特別是在子組件提供隨後由其父組件使用的元素的情況下。這種安排可能會導致不可預見的問題和故障。

Provide/Inject 是 Vue 中狀態管理的最佳選擇嗎?

Vue 的「提供」和「注入」功能提供的一個顯著優勢是它們能夠促進各種元件的資料流和應用程式狀態的有效管理。然而，這些好處並非沒有缺點，因為使用「提供」和「注入」可能會對調試、測試和維護複雜的軟體系統造成困難。

Pinia 是一個受人尊敬的 Vue 應用程式狀態管理解決方案，提供了一種全面且結構良好的方法來處理這些程式中的複雜狀態。 Pinia 提供的集中儲存庫和印刷安全系統簡化了建立 Vue 應用程式的流程，同時提高了可存取性和效率。