vue 封装mqtt 多次使用

可以将MQTT封装成一个Vue插件，并将其注册到Vue实例中，这样就能够在多个组件中使用它了。

首先，我们要安装MQTT的npm包：

npm install mqtt --save

然后，我们创建一个mqtt.js文件，将MQTT封装成一个插件：

import mqtt from 'mqtt'

const mqttPlugin = {
  install (Vue, options) {
    Vue.prototype.$mqtt = mqtt.connect(options.host, options.options)
  }
}

export default mqttPlugin

在这里，我们使用了Vue的插件机制，在Vue实例中注册了一个全局的$mqtt属性，可以在任意组件中使用。

我们还需要在main.js文件中引入mqtt插件：

import Vue from 'vue'
import App from './App.vue'
import mqttPlugin from './mqtt.js'

Vue.use(mqttPlugin, {
  host: 'mqtt://localhost:1883',
  options: {
    clientId: 'myClientId'
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

在这里，我们使用Vue.use()方法来安装mqtt插件，并传递了host和options参数，以便连接到MQTT服务器。

现在，我们就可以在任意组件中使用$mqtt属性来连接和订阅MQTT主题了：

export default {
  mounted () {
    this.$mqtt.on('connect', () => {
      console.log('MQTT connected')
      this.$mqtt.subscribe('my/topic')
    })
    this.$mqtt.on('message', (topic, payload) => {
      console.log(`Received message on topic ${topic}: ${payload.toString()}`)
    })
  },
  beforeDestroy () {
    this.$mqtt.end()
  }
}

在这个例子中，我们在组件的mounted()钩子中连接到MQTT服务器，并订阅了一个主题。在message事件中，我们打印出了收到的消息。

最后，在组件的beforeDestroy()钩子中，我们关闭了MQTT连接。

这样，我们就成功地封装了MQTT，并能够在多个组件中使用了。