用Provide和Inject做Vue3插件的方法是什么

這篇文章主要介紹“用Provide和Inject做Vue3插件的方法是什么”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“用Provide和Inject做Vue3插件的方法是什么”文章能幫助大家解決問題。

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

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

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

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

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

什么是 provide 和 inject

我們需要某種鍵來識(shí)別依賴關(guān)系， Javascript 的 Symbol 可以復(fù)合這種要求。

然后 provide 方法會(huì)將我們的 Symbol 與某個(gè)值相關(guān)聯(lián)，而 inject 方法會(huì)用相同的 Symbol 檢索這個(gè)值。

下面是一個(gè)例子：

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

Vue3 通過這種模式可以實(shí)現(xiàn)一些很實(shí)用的技巧。

可以在程序中全局提供依賴項(xiàng)

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

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 提供響應(yīng)式數(shù)據(jù)

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

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

怎樣在插件中使用 provide 和 inject

實(shí)際上設(shè)計(jì)插件與我們剛才看到的簡(jiǎn)單例子非常相似。

但是我們不想使用單個(gè)值，而是要使用組合函數(shù)。這是 Vue3 的一個(gè)巨大優(yōu)勢(shì) —— 能夠根據(jù)函數(shù)組織和提取代碼。

由于我們的代碼無論如何都應(yīng)該用有組織的組合函數(shù)編寫，所以只需要?jiǎng)?chuàng)建這些 provide 和 inject 方法就能夠?qū)懗鲆粋€(gè)插件。

先簡(jiǎn)單的看一下 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 }

在實(shí)際的組件中會(huì)這樣使用：

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

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

組件永遠(yuǎn)不必真正進(jìn)行 provide/inject 調(diào)用，而只需調(diào)用插件公開的 provideStore/useStore 方法即可。

還能用舊的插件嗎

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

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

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

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

關(guān)于“用Provide和Inject做Vue3插件的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。