优化MQTT模块代码

src/plugins/MMCMQTT/store.js

 import mqtt from 'mqtt';
-import mqttOrders from "./mqttOrders";
+import orders from "./orders";
 
 function uint8array2json(uint8array) {
   if (!uint8array || !uint8array.length) {
@@ -22,7 +22,7 @@ export default {
         type(如258): {}
       } */
     },
-    mqttOrders, //所有指令
+    orders, //所有指令
   },
   mutations: {
     setClient(state, data) {
@@ -35,7 +35,11 @@ export default {
       state.url = data;
     },
     setDataSet(state, data) {
-      state.dataSet = data;
+      let temp = {};
+      Object.keys(data).forEach((key) => {
+        temp[key] = data[key];
+      });
+      state.dataSet = temp;
     },
   },
   actions: {
@@ -62,11 +66,7 @@ export default {
           state.dataSet[deviceHardId] = {};
         }
         state.dataSet[deviceHardId][data.type] = data;
-        let temp = {};
-        Object.keys(state.dataSet).forEach((key) => {
-          temp[key] = state.dataSet[key];
-        });
-        commit("setDataSet", temp);
+        commit("setDataSet", state.dataSet);
       });
 
       /**
@@ -116,6 +116,10 @@ export default {
       if (client) {
         client.unsubscribe(topic);
       }
+      if (state.dataSet[deviceHardId]) {
+        state.dataSet[deviceHardId] = undefined;
+        commit("setDataSet", state.dataSet);
+      }
     },
     /**
      * 发布
@@ -146,14 +150,14 @@ export default {
      * @param {Function} param1.callback 成功回调
      */
     order({ dispatch }, { topic, order, data, callback }) {
-      if (mqttOrders[order] === undefined) {
+      if (orders[order] === undefined) {
         throw "该命令不存在！";
       }
 
       dispatch("publish", {
         topic,
         data: {
-          type: mqttOrders[order],
+          type: orders[order],
           data,
           callback,
         },

vue2/src/views/mqtt/demo.js

@@ -4,8 +4,15 @@ export default `
     <el-form>
       <el-form-item label="无人机id">
         <el-input v-model="deviceHardId"></el-input>
-        <el-button @click="onSubscribe">订阅</el-button>
+      </el-form-item>
+      <el-form-item label="操作">
+        <el-button @click="subscribe">订阅</el-button>
         <el-button @click="unsubscribe">取消</el-button>
+        <el-button @click="publish({type: orders.继续航线任务})">通过原始type发送指令</el-button>
+        <el-button @click="order({order: '继续航线任务'})">通过关键字发送指令</el-button>
+      </el-form-item>
+      <el-form-item label="支持的指令">
+        {{ orders }}
       </el-form-item>
     </el-form>
     <div>
@@ -25,6 +32,12 @@ export default {
   computed: {
     text(){
       return this.$store.state.MMCMQTT.dataSet;
+    },
+    orders(){
+      return this.$store.state.MMCMQTT.orders;
+    },
+    topic(){
+      return \`PX4/RECEIVE/\${this.deviceHardId}\`;
     }
   },
   async created(){
@@ -38,9 +51,9 @@ export default {
     console.log('mqtt连接成功');
   },
   methods: {
-    onSubscribe(){
+    subscribe(){
       this.$store.dispatch('MMCMQTT/subscribe', {
-        topic: \`PX4/RECEIVE/\${this.deviceHardId}\`,
+        topic: this.topic,
         callback(){
           console.log('订阅成功')
         }
@@ -48,8 +61,28 @@ export default {
     },
     unsubscribe(){
       this.$store.dispatch('MMCMQTT/unsubscribe', {
-        topic: \`PX4/RECEIVE/\${this.deviceHardId}\`
+        topic: this.topic
       })  
+    },
+    publish({ type }){
+      this.$store.dispatch('MMCMQTT/publish', {
+        topic: this.topic,
+        data: {
+          type
+        },
+        callback(){
+          alert('发送成功')
+        }
+      })
+    },
+    order( { order } ){
+      this.$store.dispatch('MMCMQTT/order', {
+        topic: this.topic,
+        order,
+        callback(){
+          alert('发送成功')
+        }
+      })
     }
   }
 }

vue2/src/views/mqtt/demo.vue

@@ -7,7 +7,11 @@
       <el-form-item label="操作">
         <el-button @click="subscribe">订阅</el-button>
         <el-button @click="unsubscribe">取消</el-button>
-        <el-button @click="publish({type: mqttOrders.继续航线任务})">继续飞行</el-button>
+        <el-button @click="publish({type: orders.继续航线任务})">通过原始type发送指令</el-button>
+        <el-button @click="order({order: '继续航线任务'})">通过关键字发送指令</el-button>
+      </el-form-item>
+      <el-form-item label="支持的指令">
+        {{ orders }}
       </el-form-item>
     </el-form>
     <div>
@@ -28,8 +32,8 @@ export default {
     text(){
       return this.$store.state.MMCMQTT.dataSet;
     },
-    mqttOrders(){
-      return this.$store.state.MMCMQTT.mqttOrders;
+    orders(){
+      return this.$store.state.MMCMQTT.orders;
     },
     topic(){
       return `PX4/RECEIVE/${this.deviceHardId}`;
@@ -69,6 +73,15 @@ export default {
           alert('发送成功')
         }
       })
+    },
+    order( { order } ){
+      this.$store.dispatch('MMCMQTT/order', {
+        topic: this.topic,
+        order,
+        callback(){
+          alert('发送成功')
+        }
+      })
     }
   }
 }