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

Question

我现在正在使用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()时，它被认为没有定义

Answer 1

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

对于VuejS 3

在您的main.js 中

import { soketio } from 'socket.io-client'
const app = createApp(App)
app.config.globalProperties.$soketio = soketio
app.mount("#app")

对于VuejS 2

在您的main.js 中

import { soketio } from 'socket.io-client'
Vue.prototype.$soketio = soketio;
new Vue({ render: h => h(App) }).$mount('#app')

在任何组件中，您都可以使用"；这个"；，像Vuejs 2和Vuejs3 的任何其他实例属性一样

this.$soketio ...

有关更多详细信息，请参见Vuejs 3.x Global API。

有关更多详细信息，请参阅Vuejs 2.x实例属性。

祝你好运。