Vue.js 如何将socket.io-client导入每个组件？

我正在使用Socket.IO构建一个聊天应用程序，我有一个连接了多少用户的计数器

我的问题是，当只有一个用户连接时，计数器显示3。为什么是3？因为我有3个组件，我正在每个组件中导入socket.io-client

import io from "socket.io-client";
const socket = io();

export default {
   // bla bla bla
}

如何导入一次并使其在我的应用程序中随处可用？我尝试在main.js中导入它，然后像

import { io } from 'socket.io-client';
createApp(App)
  .use(io)
  .mount("#app");

---

但是在我的组件中，当我执行

const socket=io（）

时，它被认为是未定义的

您可以通过将其添加为实例属性，使其可用于所有组件

适用于VuejS 3

在main.js中

import { soketio } from 'socket.io-client'

const app = createApp(App)
app.config.globalProperties.$soketio = soketio
app.mount("#app")

import { soketio } from 'socket.io-client'

Vue.prototype.$soketio = soketio;
new Vue({ render: h => h(App) }).$mount('#app')

适用于VuejS 2

在main.js中

import { soketio } from 'socket.io-client'

const app = createApp(App)
app.config.globalProperties.$soketio = soketio
app.mount("#app")

import { soketio } from 'socket.io-client'

Vue.prototype.$soketio = soketio;
new Vue({ render: h => h(App) }).$mount('#app')

在任何组件中，都可以使用“this”访问它，就像Vuejs 2和Vuejs3的任何其他实例属性一样

this.$soketio ...

有关更多详细信息，请参阅

有关更多详细信息，请参阅

---

祝你好运。

@Dan确实如此，但我无法同时使用这两种解决方案。。。为什么他们在createApp中传递对象，为什么他们使用“Vue”而不是createApp作为默认值？您可以继续将

应用程序

对象传递给该方法。我不知道为什么它们在中显示这样的空对象，但我只是在链接中更改了它answer@Dan我成功了，非常感谢！！我正在做啊哈