Javascript VueJS-使用vue提供创建的全局服务函数，在vue组件中调用服务时未定义

我创建了一个vue基础项目

我想做的是：

• 在每个能够使用

  this.$service.service.get（）

  调用我想要的任何API的组件中创建一个全局服务函数（用于调用API），而无需注入
• 将app.provide和declare服务用作全局常量
• 这是我的main.js

//main.js
常量配置={
服务：createRepository（{httpClient}）
}
//Vue.prototype.$repository=config.repository；
const app=createApp({
创建（）{
},
渲染：（）=>(
h（应用程序）
)
});
app.provide（“$service”，config.service）
app.mixin（mixin）
应用程序使用（路由器）
app.mount（“#app”）；

//mixin.js
从“/serviceProvider”导入serviceProvider；
const mixins=[serviceProvider]；
常数mixin={
安装：功能（Vue、选项）{
mixin.forEach（m=>Vue.mixin（m））
}
}
导出默认mixin；
//serviceProvider.js
导出默认值{
beforeCreate（）{
const options=this.$options；
const service=options.$service | |（options.parent？options.parent.$service:null）；
如果（！服务）返回；
这.$服务=服务；
Object.keys（服务）.forEach（（键，索引）=>{
此[`${key}`]=service[key]
})
}
}

我的预期结果是什么：

• 希望看到从HomePage.vue调用的函数

//HomePage.vue
异步创建（）{
等待此消息。$service.authService.get（）
}

我目前的结果是什么：

• authService未定义

请注意，我当前的设置有任何问题。谢谢。

如果没有

inject

如果您不想使用

inject

，只需使用（替换Vue 2中的

Vue.prototype

）

app.config.globalProperties.$service=createRepository（{httpClient}）

---

此。$service

现在将在应用程序的每个组件中提供…

谢谢。我试着用你的方式，它只是添加了GlobalProperty就可以了，不需要创建ServiceProvider。如果没有serviceProvider，你能简单介绍一下吗？仅仅使用app.config.globalProperties有什么不同？坦白地说，很难理解你的意思。我看不到整个

serviceProvider

…除了可能将

$service

键扩展到多个Vue实例属性之外。实际上，我试图控制调用API的服务，但仍然不确定哪种实现是最好的。“最好”取决于许多因素。使用

app.config.globalProperties

是最简单的方法。如果您计划使用，使用提供/注入可能是最好的，因为

此
在
设置（）中不可用。
函数。。。