typescript - 如何在 Vue 3 组合式 API 中创建 axios 插件

我正在使用 Vue 3 组合式 API 和 TypeScript。

我想制作一个 Axios 插件以在我的项目中使用。

这是我的代码

插件/axios.js

import axios from 'axios'
const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
})
export default {
    install: (app, options) => {
        app.config.globalProperties.$axios={ ...axiosInstance }
    }
}

main.ts

import { createApp } from 'vue'

import axiosPlugin from '@/plugins/axios.js'


import App from './App.vue'

const app = createApp(App)

app.use(axiosPlugin, {})

app.mount('#app')

我的组件

<script setup lang="ts">
import { $axios } from 'vue'

但是我在最后的代码部分有错误

模块 '"vue"' 没有导出的成员 '$axios'.ts(2305)

也许在为 axios 声明插件时出了问题

有什么问题？

答案＃1

你的 axios 插件没有在 Vue 库中公开，所以直接导入是行不通的。你的插件是绑定到 Vue 实例上的。在 Vue 2（或 options API）中，你可以使用 this 关键字，但在 setup 方法中你需要使用 getCurrentInstance。试试这个方法

<script setup lang='ts'>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const axios = app.appContext.config.globalProperties.$axios
</script>

或者你可以使用 provide/inject 方法。
在你的 main.ts 中

app.provide('axios', axiosInstance);

在你的组件中

import { inject } from 'vue';
const axios = inject('axios');