Vue3全局挂载Axios后调用get方法报Cannot read properties of undefined错误如何解决？

• 若你使用了<script setup>语法：该语法上下文不存在组件实例this，无法访问挂载到globalProperties上的属性
• 若你使用的是选项式API：main.js中创建实例时未正确传入根组件，或全局属性挂载完成后未调用app.mount('#app')完成实例挂载，导致属性未生效
• 排查项：确认@/data/db路径正确，Axios封装文件的默认导出无错误

场景1：使用<script setup>语法 #

推荐两种实现方式：

方式1：直接导入使用（最简单稳定） #

直接在需要调用接口的组件中引入封装好的Axios实例即可，无需全局挂载：

// 对应组件的script部分
import api from '@/data/db'
import { onMounted } from 'vue'

onMounted(async () => {
  const response = await api.get("/movie/550");
  console.log(response);
})

方式2：全局挂载用provide+inject实现 #

如果需要全局复用不想每次导入，使用Vue3官方推荐的provide/inject替代globalProperties：

1. 修正main.js代码：

import { createApp } from 'vue'
import App from './App.vue'
import api from "@/data/db";

const app = createApp(App);
// 全局注入api实例
app.provide('$http', api)
app.mount('#app')

2. 组件内调用：

import { inject, onMounted } from 'vue'
// 取出全局注入的实例
const $http = inject('$http')

onMounted(async () => {
  const response = await $http.get("/movie/550");
  console.log(response);
})

场景2：使用选项式API #

修正main.js的实例初始化逻辑，先挂载全局属性再调用mount：

import { createApp } from 'vue'
// 引入你的根组件，不要传空对象到createApp
import App from './App.vue'
import api from "@/data/db";

const app = createApp(App);
app.config.globalProperties.$http = api;
// 必须调用mount完成实例挂载
app.mount('#app')

修正后原组件的this.$http调用即可正常生效。

内容的提问来源于stack exchange，提问作者Ahmed Ragab