Design a data collector with vue

function useA(){
 watch(new,old){
  if(start){
    if(new.type == 'need')
     const a = {
      a:new.a
     }
     const aa = {
      aa:new.aa
     }
     upload(a)
     upload(aa)
  }
 }
}
// Multiple data scattered function useB(){
 // Repeated monitoring watch(new,old){
 // Global judgment if(start){
    // Different state judgment if(new.type =='need')
     const b = {
      b:new.b
     }
     //Repeat data format const aa = {
      b:new.aa
     }
     upload(b)
     upload(aa)
  }
 }
}

/*
 * @Description: Collect public classes * @version: 1.0.0
 * @Author: Wu Wenzhou* @Date: 2021-04-20 19:44:35
 * @LastEditors: Wu Wenzhou* @LastEditTime: 2021-04-22 15:20:50
 */
/**
 * @name: Dep
 * @msg: Dependency collection object */
class Dep {
  private subs: any = []
  // Add observer public addSub(sub: any) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  //Send notification public notify(content: any) {
    this.subs.forEach((sub: any) => {
      sub.update(content)
    })
  }
}
/**
 * @name: Watcher
 * @msg: observer object*/
class Watcher {
  private cb!: (arg: any) => void
  constructor(cb: (arg: any) => void) {
    // The callback function is responsible for updating this.cb = cb
  }
  // Update when data changes update(content: any) {
    this.cb(content)
  }
}
/**
 * @name: Channel
 * @msg: cache message pipeline*/
class Channel {
  //Pipeline storage array private queue: any = []
  // Pipeline size private limitSize = 1
  //Pipeline name public name: string
  constructor(name: string, limitSize = 1) {
    this.name = name
    // The minimum size is 1
    limitSize = limitSize >= 1 ? limitSize : 1
    this.limitSize = limitSize
  }
  /**
   * @name: push
   * @msg: added data*/
  push(item: any) {
    // Remove the first one if the limit size is exceeded if (this.limitSize == this.queue.length) {
      this.queue.shift()
    }
    this.queue.push(item)
  }
  /**
   * @name: getLast
   * @msg: Get the last added data*/
  getLast() {
    if (this.queue.length > 0) {
      return this.queue[this.queue.length - 1]
    } else {
      throw new Error('no item return')
    }
  }
  /**
   * @name: getLastIndex
   * @msg: Get the last countdown data*/
  getLastIndex(index: number) {
    try {
      return this.queue[this.queue.length - index - 1]
    } catch (error) {
      throw new Error('no item return')
    }
  }
  /**
   * @name: isEmpty
   * @msg: Is the pipe empty? */
  isEmpty() {
    return this.queue.length == 0
  }
}
export class Collection {
  //Dependency collection object private dep = new Dep()
  // Classification of each data channel private dataQueue = ['A', 'B', 'C']
  // Channel collection private channelMap = new Map()
  // Upload queue private MQ!: LiveCollectionMQ
  // Strategy mode: different data types correspond to different processing mechanisms private strategies = {
    A: () => {
      // You can obtain corresponding data in different pipelines for different logical processing},
    B: () => {

    },
    C: () => {
    },
  } as Record<NotifyType, any>
  constructor() {
    this.init()
  }
  private init() {
    // Initialize the watcher
    this.intWatcher()
    // Initialize the channel this.initChannel()
    // Initialize data this.initData()
    // Initialize the queue this.initMQ()
  }
  /**
   * @name:intWatcher
   * @msg: Initialize listener */
  private intWatcher() {
    this.dep.addSub(
      new Watcher((type: NotifyType) => {
        const handlerBack = this.getHandler(type)
        handlerBack()
      }),
    )
  }
  /**
   * @name: initChannel
   * @msg: Initialize channel */
  private initChannel() {
    this.dataQueue.forEach(item => {
      this.channelMap.set(item, new Channel(item, 3))
    })
  }
  /**
   * @name: initData
   * @msg: Initialize channel data * @param {*}
   */
  private initData() {
    
  }
  /**
   * @name: initMQ
   * @msg: Initialize upload queue*/
  private initMQ() {

  }
  /**
   * @name: getMQ
   * @msg: Get the message queue */
  public getMQ() {
    return this.MQ
  }
  /**
   * @name:getChannel
   * @msg: Get the channel instance based on the channel name * @param {name} channel name */
  private getChannel(name: NotifyType) {
    if (this.channelMap.get(name)) {
      return this.channelMap.get(name)
    } else {
      throw new Error('no channel')
    }
  }
  /**
   * @name:notify
   * @msg: Dependent notification method * @param {NotifyType} type
   * @param {any} mes
   */
  public notify(type: NotifyType, mes: any) {
    // Set the pipeline cache this.setChannel(type, mes)
    // Global unified judgment state to determine whether to distribute data if (state.value.type) {
      this.dep.notify(type)
    }
  }
  /**
   * @name: setChannel
   * @msg: Set channel cache * @param {NotifyType} name
   * @param {any} mes
   */
  private setChannel(name: NotifyType, mes: any) {
    const channel = this.getChannel(name)
    channel.push(mes)
  }
  /**
   * @name:getHandler
   * @msg: get * @param {NotifyType} name
   */
  private getHandler(name: NotifyType) {
    return this.strategies[name]
  }
  /**
   * @name: getChannelLast
   * @msg: Get the latest data in the specified pipeline * @param {NotifyType} name
   * @return {*}
   */
  public getChannelLast(name: NotifyType) {
    try {
      const channel = this.getChannel(name)
      return channel.getLast()
    } catch (error) {
      throw new Error(error)
    }
  }
  /**
   * @name: getChannelLast
   * @msg: Get the reverse order data in the specified pipeline * @param {NotifyType} name
   * @param {number} index
   */
  public getChannelItemByLastIndex(name: NotifyType, index: number) {
    try {
      const channel = this.getChannel(name)
      return channel.getLastIndex(index)
    } catch (error) {
      throw new Error(error)
    }
  }
  /**
   * @name: generateA
   * @msg: Generate A data method */
  public generateA() {
    
  }
  /**
   * @name: generateB
   * @msg: Generate B data method */
  public generateB() {
    
  }
  /**
   * @name: generateC
   * @msg: Generate C data method */
  public generateC() {
    
  }
}

export const CollectionHelper = new Collection()