前言
目前在 Vue3 中一般在实例化环信 SDK 后，通常哪个文件需要就在当前文件中引入实例话后的 SDK 即可，类似这样的代码。
//实例化后导出
import EC, {
EasemobChat } from 'easemob-websdk';
let EaseClient = new EC.connection({
appKey: "YOUR_APP_KEY",
});
export {
EaseClient, EC, EasemobChat };
//使用时引入
<script setup lang="ts">
import {
reactive } from 'vue';
import {
EaseClient } from '@/EaseIM';
const loginEaseIMFrom = reactive({
username: '',
password: '',
});
//登录IM
const loginEaseIM = async () => {
try {
let {
accessToken } = await EaseClient.open({
user: loginEaseIMFrom.username,
pwd: loginEaseIMFrom.password,
});
console.log('accessToken', accessToken);
} catch (error: any) {
console.log('>>>>登录失败')
}
};
</script>
尽管这种形式完全可以满足开发需求，而且在 setup 语法糖中使用也很方便，但是如果真的要写一个 plugins 插件注册到全局中，那么我们该如何去编写呢？
step1
按照 Vue 官方文档插件编写规范，以此类格式将上面导出的EaseClient进行改造。
//文档插件编写格式
export default {
install: (app, options) => {
// 在这里编写插件代码
},
};
//改造后的格式
import type {
App } from 'vue';
import EC, {
EasemobChat } from 'easemob-websdk';
let EaseClient = new EC.connection({
appKey: 'YOUR_APPKEY',
});
interface Options extends EaseIM.EasemobChat.ConnectionParameters {
appKey: string;
}
export default {
install: (app: App, options?: Options) => {
//如果options下的appKey 不为你当前初始化的appKey,则重新实例化
if (options.appKey !== 'YOUR_APPKEY') {
EaseClient = new EC.connection({
appKey: 'YOUR_APPKEY',
});
}
//在app.config.globalProperties上挂载EaseClient
app.config.globalProperties.$EaseClient = EaseClient;
},
};
step2
改造后我们尝试像引入使用 element-plus 那样引入一下并使用 im 插件
import {
createApp } from 'vue';
import EaseClient from '@/EaseIM/plugin';
app.use(EaseClient);
// mount
app.mount('#app');
step3
那么下一步我们应该如何在 vue 组件中进行使用呢？
非 setup 语法糖用法
<script lang="ts">
export default {
//在mounted中使用是因为需要等组件加载完成后方可访问$EaseIM
async mounted() {
await this.$EaseClient.open({
user:'test',pwd:'1'});
},
setup() {
return {
};
},
};
</script>
setup 语法糖使用
<script setup lang="ts">
//导入获取当前实例的方法
import {
getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance?.proxy?.$EaseClient.open({
user: 'test', pwd: '1' });
</script>
但是我们会发现，在使用的时候 ts 类型检查告知，$EaseClient 并为找到此模块，更不用谈调用的时候能够有类型提示了。那针对这个问题我们该如何解决呢？让我们开始看下一步。
step4
其实这一步操作在 Vue 的官方文档 install 插件部分有相关描述，TypeScript 用户请参考：扩展全局属性。在这里我们只谈当前问题的解决方式，废话不多说上代码。
/*
* 如果全局中没有类似，app.d.ts或其他命名的类型声明文件请创建。
*紧接可以添加以下下类型声明
*/
import Vue from 'vue';
type EaseClient = EasemobChat.Connection;
export declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$EaseClient: EaseClient;
}
}
然后我们就可以开始组件中进行调用测试发现可以正常的使用，且带有类型提示了。
点此下载 环信Vue3 IM Demo，动手试试～
环信web sdk下载:https://www.easemob.com/download/im