這篇文章主要介紹“怎么用 Provide 和 Inject 做Vue3插件”,在日常操作中,相信很多人在怎么用 Provide 和 Inject 做Vue3插件問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用 Provide 和 Inject 做Vue3插件”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)客戶idc服務(wù)中心,提供成都服務(wù)器托管、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心,我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù),資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。
使用 Provide 和 Inject 的 Vue依賴項注入對于構(gòu)建Vue3插件或避免 prop 鉆取非常有用。
盡管不常用,但是你可以僅使用兩種內(nèi)置方法來實現(xiàn)依賴項注入:provide和inject。
通過查看 Composition API 文檔會發(fā)現(xiàn),在 Vue 3.0 中,使用 Provide 和 Inject 進行依賴項注入更為常見。這主要是因為 Composition API 對 this 引用的更改,插件必須切換為這種模式才行。
在本文中,我們將研究在 Vue3 中使用 Provide 和 Inject,以及如何將其用于構(gòu)建 VueJS 插件。
在 Vue2 中,大多數(shù)插件將屬性注入到 this 上。例如可以通過 this.$router 訪問 Vue 路由器。
但是,setup() 方法不再包含對 this 的相同引用。進行這種更改的主要原因是增加了對 Typescript 的支持。
那么在 Vue3 中該如何訪問我們的插件呢?可以用 provide 和 inject 來幫助我們在 Vue 程序中注入依賴項。Provide/inject 用于依賴項注入,可以使我們能在 Vue 程序的根目錄中提供插件,并且然后將其注入子組件中。
在 Composition API 中,只能在 setup() 方法期間調(diào)用這兩種方法。
我們需要某種鍵來識別依賴關(guān)系, Javascript 的 Symbol 可以復(fù)合這種要求。
然后 provide 方法會將我們的 Symbol 與某個值相關(guān)聯(lián),而 inject 方法會用相同的 Symbol 檢索這個值。
下面是一個例子:
import { provide, inject } from 'vue' const LoggedInSymbol = Symbol() const ParentComponent = { setup() { provide(LoggedInSymbol, true) } } const DeepDescendent = { setup() { // 第二個可選參數(shù)是默認(rèn)值(如果不存在) const isLoggedIn = inject(LoggedInSymbol, false) return { isLoggedIn } } }
Vue3 通過這種模式可以實現(xiàn)一些很實用的技巧。
如果我們想在全局作用域中提供一些東西,可以在聲明我們的 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')
如果我們希望將響應(yīng)式數(shù)據(jù)傳遞給子組件,這也非常方便。只需要用 ref() 傳遞我們方法的一個響應(yīng)式的屬性。
// 生產(chǎn)者r (父組件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn) // 消費者 (子組件) const theme = inject(LoggedInSymbol, ref('false'))
實際上設(shè)計插件與我們剛才看到的簡單例子非常相似。
但是我們不想使用單個值,而是要使用組合函數(shù)。這是 Vue3 的一個巨大優(yōu)勢 —— 能夠根據(jù)函數(shù)組織和提取代碼。
由于我們的代碼無論如何都應(yīng)該用有組織的組合函數(shù)編寫,所以只需要創(chuàng)建這些 provide 和 inject 方法就能夠?qū)懗鲆粋€插件。
先簡單的看一下 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 } }
根據(jù)上述代碼,在某些根組件中,我們提供了插件,并向其傳遞了組件函數(shù)。然后無論想在哪里使用都必須將其注入到我們的組件中。
組件永遠(yuǎn)不必真正進行 provide/inject 調(diào)用,而只需調(diào)用插件公開的 provideStore/useStore 方法即可。
簡單的來說是:能。如果多說點,那就是取決于你自己的想法。
可以繼續(xù)使用 Options API,并且對 this 的引用方式與以前相同,并且所有舊插件的工作方式都不變。
但是遷移到 Vue3 并利用其所有功能覺得是值得的。
只要你想用 Vue2 的 Options API,你的插件就可以正常工作。但是,很多維護良好的插件或庫都應(yīng)該添加對 Vue3 的支持。
正確使用 provide/inject 絕對能夠提高你對 Vue 的駕馭能力。
盡管很多應(yīng)用并不會使用這些概念,但是如果你認(rèn)真開發(fā)插件,則 Vue3 的 Composition API 意味著你必須使用provide 和 inject。
到此,關(guān)于“怎么用 Provide 和 Inject 做Vue3插件”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文題目:怎么用Provide和Inject做Vue3插件
文章來源:http://muchs.cn/article32/gesspc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、電子商務(wù)、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、服務(wù)器托管、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)