插件

插件（Plugins）是一种能为 Vue 添加全局功能的工具代码。我们会这样安装一个插件：

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身（install()）。安装函数有两个参数：安装它的应用实例（app）和传递给app.use()的额外选项（options）：

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

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

• 通过app.component()和app.directive()注册一到多个全局组件或自定义指令。
• 通过app.provide()使一个资源可被注入进整个应用。
• 向app.config.globalProperties中添加一些全局实例属性或方法
• 一个可能上述三种都包含了的功能库（例如 vue-router）。

编写一个插件

为了更好地理解如何构建 Vue 插件，我们可以试着写一个简单的i18n（国际化 Internationalization 的缩写）插件。

让我们从设置插件对象开始。建议在一个单独的文件中创建并导出它，以保证更好地管理逻辑，如下所示：

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}

我们希望有一个翻译函数，这个函数接收一个以.作为分隔符的 key 字符串，用来在用户提供的翻译字典中查找对应语言的文本。期望的使用方式如下：

{{ $translate('greetings.hello') }}

这个函数应当能够在任意模板中被全局调用。这一点可以通过在插件中将它添加到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!了。

插件中的 Provide / Inject

在插件中，我们可以通过provide来为插件用户供给一些内容。举个例子，我们可以将options参数提供给整个应用，以便各个组件都能使用这个翻译字典对象。

// 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)
  }
}

现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com