Vue3将axios挂载为全局属性apicaller后子组件提示未定义问题咨询

问题根因 #

1. 挂载顺序错误 #

你当前代码的执行顺序是先调用app.mount("#app")挂载应用，再配置globalProperties全局属性。Vue3中应用挂载完成后，所有组件的初始化逻辑已经执行完毕，此时再追加的全局属性不会被已初始化的组件识别。
你之前使用axios能正常调用，和挂载globalProperties完全无关：你的代码开头引入了bootstrap.js，Laravel默认的bootstrap.js会自动将axios挂载到window全局对象上，你直接调用的是全局window下的axios，不是Vue实例上挂载的属性。

2. 组件内调用格式错误 #

通过globalProperties挂载的全局属性，不属于全局作用域变量，不能直接通过变量名调用，需要通过Vue实例上下文访问。 #

修复步骤 #

第一步：调整挂载顺序 #

修改app.js代码，先配置全局属性，再挂载应用：

// app.js 修正后代码
require("./bootstrap.js");
// import "./bazar-script";

import { createApp } from "vue";
import axios from "axios";

import ParRecipesGroup from "./vue/Components/Parts/RecipesGroup.vue";

const app = createApp({
    el: "#app",
    components: {
        "par-recipes-group": ParRecipesGroup,
    }
})
// 先配置全局属性
app.config.globalProperties.apicaller = axios;
// 再挂载应用
app.mount("#app");

第二步：修正组件内调用方式 #

• 如果你用的是选项式API：通过this访问实例上的全局属性

// 组件内调用示例
export default {
  created() {
    this.apicaller.get("/").then(res => {
      // 处理返回结果
    })
  }
}

• 如果你用的是组合式API（setup语法）：通过getCurrentInstance获取实例上下文再访问，更推荐直接用provide/inject做全局依赖注入

// 组合式API调用示例
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.apicaller.get("/").then(res => {
  // 处理返回结果
})

内容的提问来源于stack exchange，提问作者Navid Bakhtiary