插件 ​

介紹 ​

插件 (Plugins) 是一種能為 Vue 添加全局功能的工具代碼。下面是如何安裝一個插件的示例：

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可選的選項 */
})

一個插件可以是一個擁有 install() 方法的對象，也可以直接是一個安裝函數本身。安裝函數會接收到安裝它的應用實例和傳遞給 app.use() 的額外選項作為參數：

const myPlugin = {
  install(app, options) {
    // 配置此應用
  }
}

插件沒有嚴格定義的使用範圍，但是插件發揮作用的常見場景主要包括以下幾種：

1. 通過 app.component() 和 app.directive() 註冊一到多個全局組件或自定義指令。

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

3. 向 app.config.globalProperties 中添加一些全局實例屬性或方法

4. 一個可能上述三種都包含了的功能庫 (例如 vue-router)。

編寫一個插件 ​

為了更好地理解如何構建 Vue.js 插件，我們可以試著寫一個簡單的 i18n (國際化 (Internationalization) 的縮寫) 插件。

讓我們從設置插件對象開始。建議在一個單獨的文件中創建並導出它，以保證更好地管理邏輯，如下所示：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 在這裡編寫插件代碼
  }
}

我們希望有一個翻譯函數，這個函數接收一個以 . 作為分隔符的 key 字符串，用來在用戶提供的翻譯字典中查找對應語言的文本。期望的使用方式如下：

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

這個函數應當能夠在任意模板中被全局調用。這一點可以通過在插件中將它添加到 app.config.globalProperties 上來實現：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入一個全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 獲取 `options` 對象的深層屬性
      // 使用 `key` 作為索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

我們的 $translate 函數會接收一個例如 greetings.hello 的字符串，在用戶提供的翻譯字典中查找，並返回翻譯得到的值。

用於查找的翻譯字典對象則應當在插件被安裝時作為 app.use() 的額外參數被傳入：

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

這樣，我們一開始的表達式 $translate('greetings.hello') 就會在運行時被替換為 Bonjour! 了。

TypeScript 用戶請參考：擴展全局屬性

插件中的 Provide / Inject ​

在插件中，我們可以通過 provide 來為插件用戶供給一些內容。舉例來說，我們可以將插件接收到的 options 參數提供給整個應用，讓任何組件都能使用這個翻譯字典對象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

現在，插件用戶就可以在他們的組件中以 i18n 為 key 注入並訪問插件的選項對象了。

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}