vue3 使用mqtt

在Vue 3中使用MQTT，你可以结合Vuex store来管理状态，同时利用像`vue-mqtt`这样的第三方库来实现MQTT功能。以下是基本步骤：

1. **安装依赖**：首先在项目中安装`vue-mqtt`库，例如：

   npm install vue-mqtt

2. **创建连接**：在Vue组件中创建MQTT连接，并在Vuex store中管理连接状态：

   import VueMqtt from 'vue-mqtt';
   
   Vue.use(VueMqtt);
   
   export const state = () => ({
     mqttConnected: false,
   });
   
   export const mutations = {
     SET_CONNECTED(state, connected) {
       state.mqttConnected = connected;
     },
   };

3. **监听事件**：订阅主题并在接收到消息时更新视图或执行相应的动作：

   export const actions = {
     async connect({ commit }) {
       try {
         await this.$mqtt.connect();
         commit('SET_CONNECTED', true);
         // 订阅主题
         this.$mqtt.subscribe('my/topic');
       } catch (error) {
         console.error(error);
       }
     },
     async disconnect({ commit }) {
       await this.$mqtt.disconnect();
       commit('SET_CONNECTED', false);
     },
     onMessage({ commit }, message) {
       // 处理接收到的消息
     },
   };

4. **在模板中使用**：通过`v-once`或计算属性确保只渲染一次，因为MQTT连接可能会在后台断开并重新连接：

   <template>
     <div v-if="mqttConnected">
       <!-- 显示接收到的消息 -->
       <p>{{ message }}</p>
     </div>
   </template>