插件

介紹 ​

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

js

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {

/* 可選的選項 */

})

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

js

const myPlugin = {

install(app, options) {

// 配置此應用(yòng)

}

}

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

通過 app.component() 和(hé) app.directive() 注冊一到(dào)多個全局組件或自(zì)定義指令。

通過 app.provide() 使一個資源可被注入進整個應用(yòng)。

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

一個可能(néng)上(shàng)述三種都包含了(le)的功能(néng)庫 (例如 vue-router)。

編寫一個插件 ​

爲了(le)更好(hǎo)地理(lǐ)解如何構建 Vue.js 插件，我們可以試着寫一個簡單的 i18n (國際化 (Internationalization) 的縮寫) 插件。

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

js

// plugins/i18n.js

export default {

install: (app, options) => {

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

}

}

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

template

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

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

js

// plugins/i18n.js

export default {

install: (app, options) => {

// 注入一個全局可用(yòng)的 $translate() 方法

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

// 獲取 `options` 對(duì)象的深層屬性

// 使用(yòng) `key` 作(zuò)爲索引

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

if (o) return o[i]

}, options)

}

}

}

我們的 $translate 函數會(huì)接收一個例如 greetings.hello 的字符串，在用(yòng)戶提供的翻譯字典中查找，并返回翻譯得到(dào)的值。

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

js

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {

greetings: {

hello: 'Bonjour!'

}

})

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

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

TIP

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

插件中的 Provide / Inject ​

在插件中，我們可以通過 provide 來(lái)爲插件用(yòng)戶供給一些(xiē)内容。舉例來(lái)說，我們可以将插件接收到(dào)的 options 參數提供給整個應用(yòng)，讓任何組件都能(néng)使用(yòng)這(zhè)個翻譯字典對(duì)象。

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)

}

}

現(xiàn)在，插件用(yòng)戶就可以在他(tā)們的組件中以 i18n 爲 key 注入并訪問插件的選項對(duì)象了(le)。

js

export default {

inject: ['i18n'],

created() {

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

}

}