使用 Provide 和 Inject 的 Vue依賴項注入對于構建Vue3插件或避免 prop 鉆取非常有用。

盡管不常用，但是你可以僅使用兩種內置方法來實現依賴項注入：provide和inject。

通過查看 Composition API 文檔會發現，在 Vue 3.0 中，使用 Provide 和 Inject 進行依賴項注入更為常見。這主要是因為 Composition API 對 this 引用的更改，插件必須切換為這種模式才行。

在本文中，我們將研究在 Vue3 中使用 Provide 和 Inject，以及如何將其用于構建 VueJS 插件。

[[401939]]

為什么 Vue3 插件的工作方式與以往不同

在 Vue2 中，大多數插件將屬性注入到 this 上。例如可以通過 this.$router 訪問 Vue 路由器。

但是，setup() 方法不再包含對 this 的相同引用。進行這種更改的主要原因是增加了對 Typescript 的支持。

那么在 Vue3 中該如何訪問我們的插件呢?可以用 provide 和 inject 來幫助我們在 Vue 程序中注入依賴項。Provide/inject 用于依賴項注入，可以使我們能在 Vue 程序的根目錄中提供插件，并且然后將其注入子組件中。

在 Composition API 中，只能在 setup() 方法期間調用這兩種方法。

什么是 provide 和 inject

我們需要某種鍵來識別依賴關系， Javascript 的 Symbol 可以復合這種要求。

然后 provide 方法會將我們的 Symbol 與某個值相關聯，而 inject 方法會用相同的 Symbol 檢索這個值。

下面是一個例子：

import { provide, inject } from 'vue' 
 
const LoggedInSymbol = Symbol() 
 
const ParentComponent = { 
  setup() { 
    provide(LoggedInSymbol, true) 
  } 
} 
 
const DeepDescendent = { 
  setup() { 
    // 第二個可選參數是默認值（如果不存在） 
    const isLoggedIn = inject(LoggedInSymbol, false) 
    return { 
      isLoggedIn 
    } 
  } 
} 

Vue3 通過這種模式可以實現一些很實用的技巧。

可以在程序中全局提供依賴項

如果我們想在全局作用域中提供一些東西，可以在聲明我們的 VUE 實例的時候下用 app.provide。然后可以用相同的方式進行注入。

main.jsimport { createApp } from 'vue' 
import App from './App.vue' 
 
 
const app = createApp(App) 
 
const ThemeSymbol = Symbol() 
app.provide(ThemeSymbol, 'dark') 
 
 
app.mount('#app') 

可以用 ref 提供響應式數據

如果我們希望將響應式數據傳遞給子組件，這也非常方便。只需要用 ref() 傳遞我們方法的一個響應式的屬性。

// 生產者r (父組件) 
const LoggedInSymbol = Symbol() 
const loggedIn = ref('true') 
provide(LoggedInSymbol, loggedIn) 
 
// 消費者 (子組件) 
const theme = inject(LoggedInSymbol, ref('false')) 

怎樣在插件中使用 provide 和 inject

實際上設計插件與我們剛才看到的簡單例子非常相似。

但是我們不想使用單個值，而是要使用組合函數。這是 Vue3 的一個巨大優勢 —— 能夠根據函數組織和提取代碼。

由于我們的代碼無論如何都應該用有組織的組合函數編寫，所以只需要創建這些 provide 和 inject 方法就能夠寫出一個插件。

先簡單的看一下 Vue3 Composition API 文檔中提供的插件例子。

Plugin.jsconst StoreSymbol = Symbol() 
 
export function provideStore(store) { 
  provide(StoreSymbol, store) 
} 
 
export function useStore() { 
  const store = inject(StoreSymbol) 
  if (!store) { 
    // throw error, no store provided 
  } 
  return store 
} 

在實際的組件中會這樣使用：

// 在組件根目錄提供 store 
// 
const App = { 
  setup() { 
    provideStore(store) 
  } 
} 
 
const Child = { 
  setup() { 
    const store = useStore() 
    // use the store 
  } 
} 

根據上述代碼，在某些根組件中，我們提供了插件，并向其傳遞了組件函數。然后無論想在哪里使用都必須將其注入到我們的組件中。

組件永遠不必真正進行 provide/inject 調用，而只需調用插件公開的 provideStore/useStore 方法即可。

還能用舊的插件嗎

簡單的來說是：能。如果多說點，那就是取決于你自己的想法。

可以繼續使用 Options API，并且對 this 的引用方式與以前相同，并且所有舊插件的工作方式都不變。

但是遷移到 Vue3 并利用其所有功能覺得是值得的。

只要你想用 Vue2 的 Options API，你的插件就可以正常工作。但是，很多維護良好的插件或庫都應該添加對 Vue3 的支持。

總結

正確使用 provide/inject 絕對能夠提高你對 Vue 的駕馭能力。

盡管很多應用并不會使用這些概念，但是如果你認真開發插件，則 Vue3 的 Composition API 意味著你必須使用provide 和 inject。