正在从MQTT向Vue应用程序实例获取数据

Question

如何从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时，它似乎是一个空对象。当我在客户端内部打印这个时。在函数上，我得到了正确的Vue实例及其所有字段和方法。这真的很困扰我，因为我可以访问Vue对象，但不能修改它的内容。

Answer 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...")
}
},

Answer 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')
}
}