Vue 3.0 插件

插件是自包含的代碼，通常向 Vue 添加全局級(jí)功能。它可以是公開(kāi) install() 方法的 object，也可以是 function

插件的功能范圍沒(méi)有嚴(yán)格的限制——一般有下面幾種：

1. 添加全局方法或者 property。如：vue-custom-element
2. 添加全局資源：指令/過(guò)濾器/過(guò)渡等。如：vue-touch
3. 通過(guò)全局混入來(lái)添加一些組件選項(xiàng)。如：vue-router
4. 添加全局實(shí)例方法，通過(guò)把它們添加到 config.globalProperties 上實(shí)現(xiàn)。
5. 一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能。如：vue-router

#編寫(xiě)插件

為了更好地理解如何創(chuàng)建自己的 Vue.js 版插件，我們將創(chuàng)建一個(gè)非常簡(jiǎn)化的插件版本，它顯示 i18n 準(zhǔn)備好的字符串。

每當(dāng)這個(gè)插件被添加到應(yīng)用程序中時(shí)，如果它是一個(gè)對(duì)象，就會(huì)調(diào)用 install 方法。如果它是一個(gè) function，則函數(shù)本身將被調(diào)用。在這兩種情況下——它都會(huì)收到兩個(gè)參數(shù)：由 Vue 的 createApp 生成的 app 對(duì)象和用戶(hù)傳入的選項(xiàng)。

讓我們從設(shè)置插件對(duì)象開(kāi)始。建議在單獨(dú)的文件中創(chuàng)建它并將其導(dǎo)出，如下所示，以保持包含的邏輯和分離的邏輯。

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

我們想要一個(gè)函數(shù)來(lái)翻譯整個(gè)應(yīng)用程序可用的鍵，因此我們將使用 app.config.globalProperties 暴露它。

該函數(shù)將接收一個(gè) key 字符串，我們將使用它在用戶(hù)提供的選項(xiàng)中查找轉(zhuǎn)換后的字符串。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, i18n)
    }
  }
}

我們假設(shè)用戶(hù)使用插件時(shí)，將在 options 參數(shù)中傳遞一個(gè)包含翻譯后的鍵的對(duì)象。我們的 $translate 函數(shù)將使用諸如 greetings.hello 之類(lèi)的字符串，查看用戶(hù)提供的配置內(nèi)部并返回轉(zhuǎn)換后的值-在這種情況下為 Bonjour!。

例如：

greetings: {
  hello: 'Bonjour!'
}

插件還允許我們使用 inject 為插件的用戶(hù)提供功能或 attribute。例如，我們可以允許應(yīng)用程序訪問(wèn) options 參數(shù)以能夠使用翻譯對(duì)象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, i18n)
    }


    app.provide('i18n', options)
  }
}

插件用戶(hù)現(xiàn)在可以將 inject[in18] 到他們的組件并訪問(wèn)該對(duì)象。

另外，由于我們可以訪問(wèn) app 對(duì)象，因此插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有關(guān) createApp 和應(yīng)用程序?qū)嵗母嘈畔ⅲ?qǐng)查看 Application API 文檔。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, i18n)
    }


    app.provide('i18n', options)


    app.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })


    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

#使用插件

在使用 createApp() 初始化 Vue 應(yīng)用程序后，你可以通過(guò)調(diào)用 use() 方法將插件添加到你的應(yīng)用程序中。

我們將使用在編寫(xiě)插件部分中創(chuàng)建的 i18nPlugin 進(jìn)行演示。

use() 方法有兩個(gè)參數(shù)。第一個(gè)是要安裝的插件，在這種情況下為 i18nPlugin。

它還會(huì)自動(dòng)阻止你多次使用同一插件，因此在同一插件上多次調(diào)用只會(huì)安裝一次該插件。

第二個(gè)參數(shù)是可選的，并且取決于每個(gè)特定的插件。在演示 i18nPlugin 的情況下，它是帶有轉(zhuǎn)換后的字符串的對(duì)象。

INFO

如果你使用的是第三方插件 (例如 Vuex 或 Vue Router)，請(qǐng)始終查看文檔以了解特定插件期望作為第二個(gè)參數(shù)接收的內(nèi)容。

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'


const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}


app.use(i18nPlugin, i18nStrings)
app.mount('#app')

awesome-vue 集合了大量由社區(qū)貢獻(xiàn)的插件和庫(kù)。