建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
使用 Provide 和 Inject 的 Vue依賴(lài)項(xiàng)注入對(duì)于構(gòu)建Vue3插件或避免 prop 鉆取非常有用。
通榆ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！
盡管不常用，但是你可以?xún)H使用兩種內(nèi)置方法來(lái)實(shí)現(xiàn)依賴(lài)項(xiàng)注入：provide和inject。
通過(guò)查看 Composition API 文檔會(huì)發(fā)現(xiàn)，在 Vue 3.0 中，使用 Provide 和 Inject 進(jìn)行依賴(lài)項(xiàng)注入更為常見(jiàn)。這主要是因?yàn)?Composition API 對(duì) this 引用的更改，插件必須切換為這種模式才行。
在本文中，我們將研究在 Vue3 中使用 Provide 和 Inject，以及如何將其用于構(gòu)建 VueJS 插件。
為什么 Vue3 插件的工作方式與以往不同
在 Vue2 中，大多數(shù)插件將屬性注入到 this 上。例如可以通過(guò) this.$router 訪(fǎng)問(wèn) Vue 路由器。
但是，setup() 方法不再包含對(duì) this 的相同引用。進(jìn)行這種更改的主要原因是增加了對(duì) Typescript 的支持。
那么在 Vue3 中該如何訪(fǎng)問(wèn)我們的插件呢?可以用 provide 和 inject 來(lái)幫助我們?cè)?Vue 程序中注入依賴(lài)項(xiàng)。Provide/inject 用于依賴(lài)項(xiàng)注入，可以使我們能在 Vue 程序的根目錄中提供插件，并且然后將其注入子組件中。
在 Composition API 中，只能在 setup() 方法期間調(diào)用這兩種方法。
什么是 provide 和 inject
我們需要某種鍵來(lái)識(shí)別依賴(lài)關(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 通過(guò)這種模式可以實(shí)現(xiàn)一些很實(shí)用的技巧。
可以在程序中全局提供依賴(lài)項(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ù)組織和提取代碼。
由于我們的代碼無(wú)論如何都應(yīng)該用有組織的組合函數(shù)編寫(xiě)，所以只需要?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ù)。然后無(wú)論想在哪里使用都必須將其注入到我們的組件中。
組件永遠(yuǎn)不必真正進(jìn)行 provide/inject 調(diào)用，而只需調(diào)用插件公開(kāi)的 provideStore/useStore 方法即可。
還能用舊的插件嗎
簡(jiǎn)單的來(lái)說(shuō)是：能。如果多說(shuō)點(diǎn)，那就是取決于你自己的想法。
可以繼續(xù)使用 Options API，并且對(duì) this 的引用方式與以前相同，并且所有舊插件的工作方式都不變。
但是遷移到 Vue3 并利用其所有功能覺(jué)得是值得的。
只要你想用 Vue2 的 Options API，你的插件就可以正常工作。但是，很多維護(hù)良好的插件或庫(kù)都應(yīng)該添加對(duì) Vue3 的支持。
總結(jié)
正確使用 provide/inject 絕對(duì)能夠提高你對(duì) Vue 的駕馭能力。
盡管很多應(yīng)用并不會(huì)使用這些概念，但是如果你認(rèn)真開(kāi)發(fā)插件，則 Vue3 的 Composition API 意味著你必須使用provide 和 inject。
分享名稱(chēng)：用Provide和Inject設(shè)計(jì)Vue3插件
標(biāo)題路徑：http://www.5511xx.com/article/dhdjhdj.html
