首先，咱们得先理清两个关键问题，这俩问题直接导致了你现在看到的mqttData不更新：

1. 你的MQTT连接方式根本不对！ #

浏览器环境不支持直接通过mqtt://协议连接Broker——浏览器只能用WebSocket（ws://或wss://）来和MQTT Broker通信。你现在的插件代码会在浏览器里执行，尝试用mqtt://连接，这根本连不上Broker，自然收不到任何消息，mqttData也就不会更新。

而且你的初衷是让Nuxt的Node.js服务器来连接Broker（因为Broker不支持WebSocket），但当前代码并没有实现这一点——插件默认会在客户端和服务端都执行，服务端的Node.js确实能连mqtt://，但你把客户端实例挂在了Vue.prototype上，这在客户端浏览器里还是无效的。

2. 错误使用了fetch钩子 #

Nuxt的fetch钩子是用来预取数据的，它会在组件渲染前执行，主要用于服务端渲染时把数据注入组件或Vuex。用它来长期监听MQTT消息完全不符合它的设计，而且执行时机不对，可能导致监听逻辑没有正确绑定到组件实例上。

正确的解决方案：用Nuxt服务器中转MQTT消息 #

既然Broker不支持WebSocket，我们需要让Nuxt的Node.js服务器作为中间层：服务器连接MQTT Broker，然后通过WebSocket把消息推送给客户端Vue组件。

步骤1：在Nuxt服务器端创建MQTT客户端并转发消息 #

1. 首先安装依赖：

npm install mqtt ws

2. 在Nuxt项目根目录创建server/mqtt-proxy.js：

const mqtt = require('mqtt');
const WebSocket = require('ws');

module.exports = function (server) {
  // 1. 服务器连接MQTT Broker
  const mqttClient = mqtt.connect('mqtt://broker.hivemq.com');
  
  mqttClient.on('connect', () => {
    console.log('服务器已连接MQTT Broker');
    mqttClient.subscribe('mytopic');
  });

  // 2. 创建WebSocket服务器，和客户端通信
  const wss = new WebSocket.Server({ server });
  
  wss.on('connection', (ws) => {
    console.log('客户端WebSocket连接成功');
    
    // 当收到MQTT消息时，推送给当前客户端
    const handleMqttMessage = (topic, message) => {
      ws.send(JSON.stringify({
        topic,
        message: message.toString()
      }));
    };
    
    mqttClient.on('message', handleMqttMessage);
    
    // 客户端断开连接时移除监听，避免内存泄漏
    ws.on('close', () => {
      mqttClient.off('message', handleMqttMessage);
    });
  });
  
  // 处理MQTT连接错误
  mqttClient.on('error', (err) => {
    console.error('MQTT连接错误:', err);
  });
};

3. 在nuxt.config.js里配置启动这个服务：

export default {
  server: {
    port: 3000,
    host: '0.0.0.0'
  },
  hooks: {
    listen(server) {
      require('./server/mqtt-proxy')(server);
    }
  }
};

步骤2：在Vue组件中通过WebSocket接收消息 #

现在客户端不需要直接连MQTT Broker，而是通过WebSocket连接Nuxt服务器，接收转发的消息：

<template>
  <div>
    <h3>MQTT消息</h3>
    <p>主题: {{ mqttData.topic }}</p>
    <p>内容: {{ mqttData.message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mqttData: {
        topic: undefined,
        message: undefined
      },
      ws: null
    };
  },
  mounted() {
    // 创建WebSocket连接
    this.ws = new WebSocket(`ws://${window.location.host}`);
    
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      // 直接更新数据，Vue的响应式会自动同步到模板
      this.mqttData = data;
    };
    
    this.ws.onclose = () => {
      console.log('WebSocket连接断开');
      // 可以在这里添加重连逻辑
    };
    
    this.ws.onerror = (err) => {
      console.error('WebSocket错误:', err);
    };
  },
  beforeDestroy() {
    // 组件销毁时关闭WebSocket连接
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>

如果你只是想临时测试（假设Broker支持WebSocket） #

如果你只是想验证Vue组件更新逻辑，暂时用支持WebSocket的Broker（比如hivemq的WebSocket地址是ws://broker.hivemq.com:8000/mqtt），可以修改你的代码：

1. 修正插件代码，标记为客户端仅用 #

在plugins/mqtt.js里：

import Vue from 'vue';
import mqtt from 'mqtt';

// 仅在客户端执行
if (process.client) {
  // 用WebSocket地址连接
  const client = mqtt.connect('ws://broker.hivemq.com:8000/mqtt');
  
  client.on('connect', () => {
    console.log("CONNECTED!");
    client.subscribe("mytopic", (err) => {
      if(err) console.error("订阅错误:", err);
      else console.info("订阅成功");
    });
  });
  
  Vue.prototype.$clientMqtt = client;
}

然后在nuxt.config.js里配置插件：

export default {
  plugins: [
    { src: '~/plugins/mqtt.js', mode: 'client' }
  ]
};

2. 替换fetch钩子为mounted钩子 #

<template>
  <div>
    <p>主题: {{ mqttData.topic }}</p>
    <p>内容: {{ mqttData.message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mqttData: {
        topic: undefined,
        message: undefined
      },
      messageListener: null
    };
  },
  mounted() {
    // 保存监听函数引用，方便销毁时移除
    this.messageListener = (topic, message) => {
      this.mqttData = {
        topic,
        message: message.toString()
      };
    };
    
    this.$clientMqtt.on('message', this.messageListener);
  },
  beforeDestroy() {
    // 组件销毁时移除监听，避免内存泄漏
    if (this.messageListener) {
      this.$clientMqtt.off('message', this.messageListener);
    }
  }
};
</script>

这样修改后，你的组件就能正确更新mqttData了。

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