Vue组件中全局dashboardHub变量未定义问题排查

核心错误：组件访问事件总线的名称错误 #

你在Vue原型上挂载的事件总线是$dashboardHub，但组件里调用的是this.dashboardHub（缺少$前缀），这是导致变量未定义的直接原因。

组件代码需修改为：

created() {
    console.log(this.$dashboardHub)
    // 监听SignalR推送的事件
    this.$dashboardHub.$on('review-movement-hub', this.test)
}

其他需修正的问题 #

1. SignalR客户端未正确引入 #

控制台输出window['signalR']为Undefined，说明你未正确引入SignalR客户端脚本。可通过两种方式解决：

• CDN引入：在页面<head>或<body>中添加脚本标签：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.10/signalr.min.js"></script>
  

• npm安装引入：先执行npm install @microsoft/signalr，再在脚本中导入：

  import * as signalR from '@microsoft/signalr'
  

2. Connection变量声明错误 #

创建SignalR连接时你用了this.connection，但此时this指向全局作用域（非Vue实例），导致后续connection.on会报错。需用变量声明关键字定义connection：

try {
    const connection = new signalR.HubConnectionBuilder()
        .withUrl(window.location.origin + '/dashboardHub', {})
        .withAutomaticReconnect()
        .build();
    console.log('Signalr Connection', connection);
} catch (error) {
    console.error('SignalR error ', error)
}

3. 原型挂载事件总线的笔误 #

代码中存在挂载名称的笔误，需修正为：

// 原错误代码
Vue.prototype.$questionHub = dashboardHub
// 修改后
Vue.prototype.$dashboardHub = dashboardHub

4. 启动SignalR连接 #

创建连接后需手动启动才能接收服务端事件，添加启动代码：

connection.start().catch(err => console.error(err.toString()));

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