插件

介紹 ​

插件 (Plugins) 是一(yī)種能(néng)為(wèi) Vue 添加全局功能(néng)的工(gōng)具代碼。下(xià)面是如(rú)何安裝一(yī)個插件的示例：

js

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {

/* 可(kě)選的選項 */

})

一(yī)個插件可(kě)以是一(yī)個擁有 install() 方法的對象，也可(kě)以直接是一(yī)個安裝函數(shù)本身。安裝函數(shù)會接收到安裝它的應用實例和(hé)傳遞給 app.use() 的額外(wài)選項作(zuò)為(wèi)參數(shù)：

js

const myPlugin = {

install(app, options) {

// 配置此應用

}

}

插件沒有嚴格定義的使用範圍，但(dàn)是插件發揮作(zuò)用的常見(jiàn)場景主要(yào)包括以下(xià)幾種：

通(tōng)過 app.component() 和(hé) app.directive() 注冊一(yī)到多個全局組件或自(zì)定義指令。

通(tōng)過 app.provide() 使一(yī)個資源可(kě)被注入進整個應用。

向 app.config.globalProperties 中添加一(yī)些全局實例屬性或方法

一(yī)個可(kě)能(néng)上(shàng)述三種都(dōu)包含了(le)的功能(néng)庫 (例如(rú) vue-router)。

編寫一(yī)個插件 ​

為(wèi)了(le)更好地(dì)理解如(rú)何構建 Vue.js 插件，我們可(kě)以試着寫一(yī)個簡單的 i18n (國(guó)際化 (Internationalization) 的縮寫) 插件。

讓我們從(cóng)設置插件對象開(kāi)始。建議(yì)在一(yī)個單獨的文件中創建并導出它，以保證更好地(dì)管理邏輯，如(rú)下(xià)所示：

js

// plugins/i18n.js

export default {

install: (app, options) => {

// 在這(zhè)裏編寫插件代碼

}

}

我們希望有一(yī)個翻譯函數(shù)，這(zhè)個函數(shù)接收一(yī)個以 . 作(zuò)為(wèi)分隔符的 key 字符串，用來在用戶提供的翻譯字典中查找對應語言的文本。期望的使用方式如(rú)下(xià)：

template

<h1>{{ $translate('greetings.hello') }}</h1>

這(zhè)個函數(shù)應當能(néng)夠在任意模闆中被全局調用。這(zhè)一(yī)點可(kě)以通(tōng)過在插件中将它添加到 app.config.globalProperties 上(shàng)來實現：

js

// plugins/i18n.js

export default {

install: (app, options) => {

// 注入一(yī)個全局可(kě)用的 $translate() 方法

app.config.globalProperties.$translate = (key) => {

// 獲取 `options` 對象的深層屬性

// 使用 `key` 作(zuò)為(wèi)索引

return key.split('.').reduce((o, i) => {

if (o) return o[i]

}, options)

}

}

}

我們的 $translate 函數(shù)會接收一(yī)個例如(rú) greetings.hello 的字符串，在用戶提供的翻譯字典中查找，并返回翻譯得到的值。

用于查找的翻譯字典對象則應當在插件被安裝時(shí)作(zuò)為(wèi) app.use() 的額外(wài)參數(shù)被傳入：

js

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {

greetings: {

hello: 'Bonjour!'

}

})

這(zhè)樣，我們一(yī)開(kāi)始的表達式 $translate('greetings.hello') 就會在運行(xíng)時(shí)被替換為(wèi) Bonjour! 了(le)。

TypeScript 用戶請(qǐng)參考：擴展全局屬性

TIP

請(qǐng)謹慎使用全局屬性，如(rú)果在整個應用中使用不同插件注入的太多全局屬性，很(hěn)容易讓應用變得難以理解和(hé)維護。

插件中的 Provide / Inject ​

在插件中，我們可(kě)以通(tōng)過 provide 來為(wèi)插件用戶供給一(yī)些內(nèi)容。舉例來說，我們可(kě)以将插件接收到的 options 參數(shù)提供給整個應用，讓任何組件都(dōu)能(néng)使用這(zhè)個翻譯字典對象。

js

// plugins/i18n.js

export default {

install: (app, options) => {

app.config.globalProperties.$translate = (key) => {

return key.split('.').reduce((o, i) => {

if (o) return o[i]

}, options)

}

app.provide('i18n', options)

}

}

現在，插件用戶就可(kě)以在他(tā)們的組件中以 i18n 為(wèi) key 注入并訪問(wèn)插件的選項對象了(le)。

js

export default {

inject: ['i18n'],

created() {

console.log(this.i18n.greetings.hello)

}

}