Vue3全局提供WebSocket插件后inject获取值为undefined求助

你的问题出在两个关键地方：插件中未正确使用全局提供方式，以及组件中缺少inject的显式导入。

1. 修正WebSocket插件的全局提供逻辑 #

在Vue插件的install方法中，直接调用provide函数是无效的——这个函数仅在组件实例上下文内生效。必须通过插件参数中的app实例调用app.provide，才能将WebSocket实例注册到全局注入上下文。

修正后的webSocketMixin代码：

import { WEBSOCKETURL } from '@/config';
import { useWebSocket } from '@vueuse/core';

export default {
  install(app) {
    const { status, data, send, open, close } = useWebSocket(WEBSOCKETURL, {
        autoReconnect: true,
        //heartbeat: true,
    });

    // 使用app.provide实现全局注入
    app.provide('$webSocket', { 
        status,
        data,
        close,
        send,
        open
    });
  }
};

2. 组件中显式导入inject函数 #

在Vue 3的<script setup>语法中，inject属于需要显式导入的API，不能直接使用。

修正后的组件代码：

<script setup lang="ts">
// 新增：从vue显式导入inject
import { inject, useRoute } from 'vue'
import type { Email, EmailFilter, EmailLabel } from '@/@fake-db/types'
import ComposeDialog from '@/views/apps/email/ComposeDialog.vue'
import EmailLeftSidebarContent from '@/views/apps/email/EmailLeftSidebarContent.vue'
import EmailView from '@/views/apps/email/EmailView.vue'
import type { MoveEmailToAction } from '@/views/apps/email/useEmail'
import { useEmail } from '@/views/apps/email/useEmail'
import { useEmailStore } from '@/views/apps/email/useEmailStore'
import { useResponsiveLeftSidebar } from '@core/composable/useResponsiveSidebar'
import { formatDateToMonthShort } from '@core/utils/formatters'
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'

const { isLeftSidebarOpen } = useResponsiveLeftSidebar()

// Composables
const route = useRoute()
const store = useEmailStore()
const webSocket = inject('$webSocket');

if (webSocket) {
  // Senden einer Nachricht über die WebSocket-Verbindung
  webSocket.send('Hello WebSocket!');
} else {
  console.error('WebSocket connection not available.');
}
</script>

验证逻辑 #

完成上述修改后，重新启动项目：

• 插件通过app.provide将WebSocket实例注入到根应用上下文
• 组件通过导入的inject函数，可以正确获取到全局提供的$webSocket实例

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