improve(desktop): remove some useless data from vuex

src/database/services/ConnectionService.ts

@@ -430,9 +430,8 @@ export default class ConnectionService {
   public async delete(id: string): Promise<ConnectionModel | undefined> {
     const query: ConnectionEntity | undefined = await this.connectionRepository
       .createQueryBuilder('cn')
+      .select(['cn.id'])
       .where('cn.id = :id', { id })
-      .leftJoinAndSelect('cn.messages', 'msg')
-      .leftJoinAndSelect('cn.subscriptions', 'sub')
       .leftJoinAndSelect('cn.will', 'will')
       .getOne()
     if (!query) {

src/store/modules/app.ts

@@ -81,16 +81,14 @@ const app = {
       state.maxReconnectTimes = maxReconnectTimes
     },
     [CHANGE_ACTIVE_CONNECTION](state: App, payload: Client) {
-      const { id, client, messages } = payload
+      const { id, client } = payload
       if (state.activeConnection[id]) {
         // already exists activeConnection
         Vue.set(state.activeConnection[id], 'client', client)
-        Vue.set(state.activeConnection[id], 'messages', messages)
       } else {
         // new activeConnection
         Vue.set(state.activeConnection, id, {
           client,
-          messages,
         })
       }
     },

src/types/global.d.ts

@@ -81,7 +81,6 @@ declare global {
   interface ActiveConnection {
     [id: string]: {
       client: MqttClient
-      messages: MessageModel[]
       subscriptions?: SubscriptionModel[]
     }
   }
@@ -127,7 +126,6 @@ declare global {
   interface Client {
     readonly id: string
     client: Partial<MqttClient>
-    messages: MessageModel[]
   }
 
   interface Message {

src/views/connections/ConnectionForm.vue

@@ -693,7 +693,6 @@ export default class ConnectionForm extends Vue {
           client: {
             connected: false,
           },
-          messages: [],
         })
         this.$emit('connect')
         this.$router.push(`/recent_connections/${res.id}`)

src/views/connections/ConnectionsDetail.vue

@@ -777,7 +777,6 @@ export default class ConnectionsDetail extends Vue {
     this.changeActiveConnection({
       id: this.curConnectionId,
       client: this.client,
-      messages: [],
     })
     if (this.record.id) {
       const { messageService } = useServices()
@@ -912,7 +911,6 @@ export default class ConnectionsDetail extends Vue {
       this.changeActiveConnection({
         id: this.curConnectionId,
         client: this.client,
-        messages: this.record.messages,
       })
       this.$notify({
         title: this.$tc('connections.disconnected'),
@@ -936,7 +934,6 @@ export default class ConnectionsDetail extends Vue {
     this.changeActiveConnection({
       id: this.curConnectionId,
       client: this.client,
-      messages: this.record.messages,
     })
     this.$notify({
       title: this.$tc('connections.connected'),
@@ -1520,7 +1517,6 @@ export default class ConnectionsDetail extends Vue {
       this.changeActiveConnection({
         id: connectionID,
         client,
-        messages: this.messages,
       })
     })
   }

src/views/connections/ConnectionsList.vue

@@ -154,7 +154,7 @@ import time from '@/utils/time'
   },
 })
 export default class ConnectionsList extends Vue {
-  @Prop({ required: true }) public ConnectionModelData!: ConnectionModel[] | []
+  @Prop({ required: true }) public connectionCount!: number
 
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void
   @Action('SET_CONNECTIONS_TREE') private setConnectionsTree!: (payload: ConnectionTreeState) => void
@@ -192,9 +192,9 @@ export default class ConnectionsList extends Vue {
       this.selectedCollection = null
     }
   }
-  @Watch('ConnectionModelData')
-  private handleConnectionModelDataChange(val: ConnectionModel[] | [], oldVal: ConnectionModel[] | []) {
-    this.loadData(val.length === 1 && oldVal.length === 0)
+  @Watch('connectionCount')
+  private handleConnectionCountChange(val: number, oldVal: number) {
+    this.loadData(val === 1 && oldVal === 0)
   }
   @Watch('$route.params.id')
   private handleConnectionIdChanged(id: string) {

src/views/connections/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="connections">
     <div class="left-list">
-      <ConnectionsList :ConnectionModelData="records" @delete="onDelete" @reload="loadData(true, false)" />
+      <ConnectionsList :connectionCount="connectionCount" @delete="onDelete" @reload="loadData(true, false)" />
     </div>
     <div class="connections-view">
       <template v-if="isLoadingData">
@@ -49,7 +49,7 @@ import { getDefaultRecord } from '@/utils/mqttUtils'
 export default class Connections extends Vue {
   private isEmpty: boolean = false
   private isLoadingData: boolean = false
-  private records: ConnectionModel[] = []
+  private connectionCount: number = 0
   private currentConnection: ConnectionModel = { ...getDefaultRecord() }
 
   @Watch('$route.params.id')
@@ -85,10 +85,6 @@ export default class Connections extends Vue {
     return this.$route.params.id
   }
 
-  get vueForm(): VueForm {
-    return this.$refs.form as VueForm
-  }
-
   private async loadDetail(id: string): Promise<void> {
     const { connectionService } = useServices()
     const res: ConnectionModel | undefined = await connectionService.get(id)
@@ -102,8 +98,8 @@ export default class Connections extends Vue {
       this.isLoadingData = true
     }
     const { connectionService } = useServices()
-    const connections: ConnectionModel[] | [] = (await connectionService.cascadeGetAll()) ?? []
-    this.records = connections
+    const connections: ConnectionModel[] | [] = (await connectionService.getAll()) ?? []
+    this.connectionCount = connections.length
     this.isLoadingData = false
     if (connections.length && loadLatest) {
       const leatestId = await connectionService.getLeatestId()