[Vue3]为自定义组件/插件库创建全局配置

前言

为已有组件/插件库添加一些全局可读取的配置，进行一些例如 默认值/组件Class/样式 等的修改，这里以实现扩展组件Class功能来进行演示
此文为个人编程记录，默认已经有按照Vue文档插件篇要求开发好的组件/插件库项目
本文缓慢更新中，文中省略的部分如有兴趣可私信作者，会另起文章进行补充

---

一、插件配置

Vue插件一般默认导出一个拥有 app, options 两个参数 install() 方法

在官方文档中有介绍到，我们可以通过 ：

1. 通过 app.provide() 使一个资源可被注入进整个应用
2. 向 app.config.globalProperties 中添加一些全局实例属性或方法

我这里选择了 app.provide() 

1.配置插件库

首先需要在引用插件的地方传入配置，这里的 yourConfig 对象会被传入到我们插件库 默认导出 的 install() 方法的第二个参数中

// 引入插件
import { createApp } from 'vue';
import yourPlugin from 'your-plugin'; // 插件库

const app = createApp({})

app.use(yourPlugin, {
  yourConfig: {
    name: ['demo-class', 'test-class'],
  },
});

然后在我们 插件库 默认导出的 install() 方法中通过 options 参数接收，使用 app.provide() 为全局注入配置

// your-plugin index.ts
import type { App, Plugin } from 'vue';
import Components from '@your-plugin/components'; // 需要注册的组件集合

type installOptions = {
	yourConfig?: {
		name?: string[];
	};
};

const installer = (plugin: Plugin[]) => {
	return {
		install: (app: App, options: installOptions = {}) => {
			const { yourConfig } = options;
			if (yourConfig) app.provide('yourConfig', yourConfig);
            // 此处遍历需要注册的子组件，逐个进行安装
			plugin.forEach((comp) => {
				app.use(comp, options);
			});
		},
	};
};


export default installer(Components);

2.使用配置

然后我们就能够在 插件库 组件内部通过 inject() 方法引入配置的属性

// @your-plugin/components component.vue
import { inject } from 'vue';
const yourConfig = inject('youConfig', {});

这是最基础的用法，接下来进行一个优化和封装 

二、优化封装

为了更方便地对插件库配置进行默认值配置或其他操作，最好对插件库配置进行封装，这里我用到 npm workspaces 对代码进行抽取，并通过 Vue 组合式函数的用法进行封装

1.函数封装

npm workspace的配置过程省略，需要的自行补充相关知识

我们创建 packages/config 目录，并在里面添加 package.json 文件
 

// packages/config/package.json
{
  "name": "@your-plugin/config",
  "private": true,
  "main": "index.ts"
}

创建一个组合式函数文件，将函数简单的分为了 保存/获取 两个方法

// packages/config/index.js
import type { App } from 'vue';
import { inject } from 'vue';

// 保存配置
export function setConfig<T>(config: T, app: App): void {
	if (app) app.provide('yourConfig', config);
}

type YourConfig = {
	name: string[];
};

// 获取配置
export function useConfig(): YourConfig {
	const config = inject('yourConfig', {
		name: ['demo-class'], // 预设配置默认值
	} as YourConfig );
	return config;
}

修改我们插件库 默认导出 的配置代码

// your-plugin index.ts
import type { App, Plugin } from 'vue';
import Components from '@your-plugin/components'; // 需要注册的组件集合
// 导入配置函数
import { setConfig } from '@your-plugin/config';

type installOptions = {
	yourConfig?: {
		name?: string[];
	};
};

const installer = (plugin: Plugin[]) => {
	return {
		install: (app: App, options: installOptions = {}) => {
            // 修改此处代码
			// const { yourConfig} = options;
			// if (yourConfig) app.provide('yourConfig', yourConfig);

            const { yourConfig } = options;
			if (yourConfig) setConfig(yourConfig, app);

            // 此处遍历需要注册的子组件，逐个进行安装
			plugin.forEach((comp) => {
				app.use(comp, options);
			});
		},
	};
};


export default installer(Components);

2.使用配置

最后只要在需要使用的地方导入上面使用 npm workspaces 创建的包的use函数，便能通过 inject() 读取安装插件是保存下来的配置 

// your-plugin/component.vue
// 导入配置函数
import { useConfig } from '@your-plugin/config';

const { name } = useConfig();