我正在使用 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'
但我有error在最后一个代码部分
模块“vue”没有导出成员“$axios”.ts(2305)
也许为 axios 声明插件有问题
有什么问题 ?
您的 axios 插件未在 Vue 库中公开,因此导入不起作用。您的插件已连接到 Vue 实例。在 Vue 2(或选项 API)中你可以使用this
关键字,但在设置方法中您需要使用getCurrentInstance
。尝试这个
<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const axios = app.appContext.config.globalProperties.$axios
</script>
或者,您可以使用提供/注入方法。
在你的 main.ts 中
app.provide('axios', axiosInstance);
在你的组件中
import { inject } from 'vue';
const axios = inject('axios');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)