介绍一种在Vue 3.0 下封装第三方插件的方法

概要

Vue在升级到3.0之后，我们不能再按照2.0的方式，在其原型链上封装第三方的插件对象。本文仿照Vuex的使用方法，结合Vue3.0的Composition API，实现一种在Vue 3.0下封装第三方插件的方法。

本文以封装Axios为例进行说明。

基本思路

Vuex是通过use方法，注册全局对象。而其对象必须包括install方法，该方法会在use方法中被调用，完成全局内容的注册。

我们依照这个思路，定义一个AxiosPlugin类，在类内封装所有axios配置，包括基本配置，拦截器配置。该类包括install方法，在该方法中完成axios对象的全局注册。

代码及实现

// 新建axios目录下的index.js

import axios from 'axios'
import { inject, readonly } from 'vue'
class AxiosPlugin{
    constructor(config){
        this.config = config;
    }
    setRequestInterceptor = (instance) => {
        instance.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token');
                if(token){
                    config.headers['token'] = token;
                }
                return config
            },
            err => Promise.reject(err)
            
        );
        return this;
    }
    setResponseInterceptor = (instance) => {
        instance.interceptors.response.use(
            res =>  res.data,
            err =>  Promise.reject(err)
        );
        return this;
    }
    install(app, isReadonly = true){
        let instance = axios.create(this.config);
        this
            .setRequestInterceptor(instance)
            .setResponseInterceptor(instance);
        app.provide("axios", 
        isReadonly ?
        readonly(instance) : instance); 
    }
}
export function createAxios(config){
    return new AxiosPlugin(config);
}
export function useAxios(){
    const axiosInstance = inject('axios');
    return axiosInstance;
}

export default createAxios({timeout:1000});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

1. 构造方法的参数是axios的基本配置，可以包括超时时间，根路径等设置。
2. setRequestInterceptor 和setResponseInterceptor 是axios对象的request和response拦截器配置，本例略去了业务代码，只保留的基本功能，可以根据具体需求，进行封装。
3. 在install方法中，创建axios对象，并传入基本配置，设置拦截器。
4. 调用vue实例的provide方法，全局注入创建的axios对象，axios对象可以根据需要决定是否设置为只读，本文默认设置为true，即对于全局axios对象，在组件中可以使用，但是不能被修改。
5. createAxios方法返回包含install方法的AxiosPlugin实例。
6. useAxios作为在组件中使用axios对象的接口，该方法通过Vue 3.0的inject方法，在组件中注入axios对象。

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axiosPlugin from '@/axios'
createApp(App).use(store).use(axiosPlugin).use(router).mount('#app');

1
2
3
4
5
6
7

1. import axiosPlugin from ‘@/axios’ 会执行axios/inde.js下的export default createAxios({timeout:1000}); 将包含install方法的AxiosPlugin类对象赋值给 axiosPlugin。
2. use(axiosPlugin)，即调用AxiosPlugin类的install方法，完成axios的全局注册。

// 在组件中使用axios对象

import { useAxios } from "@/axios"

export default {
  name: 'FileUpload',
  setup() {
    const axios = useAxios();
    return {};
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11

注意，因为useAxios方法中包括Composition API inject，所以和useStore一样，必须在setup中直接调用，不能嵌套调用。