如何将 socket.io-client 导入每个组件？ [复制]

Posted 2023-02-22

【中文标题】如何将 socket.io-client 导入每个组件？ [复制]

【英文标题】：How to import socket.io-client to every component? [duplicate]

【发布时间】：2021-03-26 09:10:19

【问题描述】：

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

【问题讨论】：

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

您可以继续将您的App 对象传递给该方法。我不确定他们为什么在docs 中显示这样的空对象，但我只是在链接的答案中更改了它

@Dan 我成功了，非常感谢！！我在做wrongahah

【参考方案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')

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

this.$soketio ...

更多详情请见Vuejs 3.x Global API。

更多详情请见Vuejs 2.x Instance Properties。

祝你好运。