从 MQTT 获取数据到 Vue 应用实例答案

【问题标题】：Fetching data from MQTT to Vue app instance从 MQTT 获取数据到 Vue 应用实例
【发布时间】：2020-11-12 19:09:24
【问题描述】：

如何从 MQTT 获取数据到 Vue 应用程序，我已经建立了正常工作的连接，我可以控制台记录数据，但我无法将数据加载到组件的数据属性。

created() {
  client.on("connect", function() {
  console.log("MQTT Connected");
  client.subscribe("#", function(err) {
    console.log(err);
  });
});
  client.on("message", (topic, message) => {
    console.log("topic:", topic);
    console.log(message.toString());
    this.mqttData = JSON.parse(message.toString());
  }); 
},

data() {
  return {
    mqttData: {}
  }
};

每当我尝试在控制台中记录 mqttData 时，它似乎是一个空对象。当我在 client.on 函数中打印 this 时，我得到了正确的 Vue 实例及其所有字段和方法。这真的很困扰我，因为我可以访问 Vue 对象但我不能修改它的内容。

【问题讨论】：

标签： node.js vue.js mqtt

【解决方案1】：

也许可以在“已安装”生命周期挂钩中尝试此操作。这是我使用的监听 websocket 的示例。它应该与您的应用程序类似的实现

mounted() {
    let connection = new WebSocket('wss://somesocket.net/ws')
    connection.onmessage = (event) => {
      console.log("Data received!")
      console.log(event.data)
      const data = JSON.parse(event.data)
      this.ws_data = data
    }
    connection.onopen = (event) => {
      console.log("Connected! Waiting for data...")
    }
},

【讨论】：

【解决方案2】：

这就是我使用vue-mqtt 包的方式。

export default {
  data () {
    return {
      sensor: ''
    }
  },
  mqtt: {
    /** Read incoming messages from topic test*/
    'test' (data) {
      this.sensor = data
      console.log(data)
    }
  },

  created () {

  },
  async mounted () {
    this.$mqtt = await this.$mqtt
    this.$mqtt.publish('test', 'hello from vuemqtt yo !!!!')
    this.$mqtt.subscribe('test')
  }
}

【讨论】：