vuex项目websocket获取的列表信息怎么渲染？

Question

vue项目需要在单页展示很多信息，列表就有好几个，实时数据。
因为页面比较复杂就拆模块了。
但是websocket是单独维护的，获取到数据之后不知道该怎么样传递到拆分后的组件。
目前的做法是使用store存储列表，websocket得到数据更新store，列表直接渲染store的数据。
但是得到的数据需要过滤加工，只能在websocket的onmessage中整理才存入store，因为我没办法在列表所在组件中监听store内部数据的更新。
结果就是onmessage已经越来越臃肿了，不利于扩展维护。
有什么办法可以解决么？

Answer 1

找到解决办法了。。。
socket再加一层封装，多处监听，单独写一个update处理器监听onmessage就可以。

class socket {
  constructor(url, options) {
    this.heartBeatTimer = null
    this.options = options
    this.messageMap = {}
    this.connState = 0
    this.socket = null
    this.url = url
  }
  doOpen() {
    if (this.connState) return
    this.connState = 1
    this.afterOpenEmit = []
    const BrowserWebSocket = window.WebSocket || window.MozWebSocket
    const socket = new BrowserWebSocket(this.url)
    socket.binaryType = 'arraybuffer'
    socket.onopen = evt => this.onOpen(evt)
    socket.onclose = evt => this.onClose(evt)
    socket.onmessage = evt => this.onMessage(evt.data)
    socket.onerror = err => this.onError(err)
    this.socket = socket
  }
  onOpen(evt) {
    this.connState = 2
    //this.heartBeatTimer = setInterval(this.checkHeartbeat.bind(this), 20000)
    this.onReceiver({ Event: 'open' })
  }
  checkOpen() {
    return this.connState === 2
  }
  onClose() {
    if (this.connState) {
      this.connState = 0
      this.onReceiver({ Event: 'close' })
    }
  }
  send(data) {
    //console.log("这是要发送的数据："+JSON.stringify(data) )
    if(this.socket.readyState != 1){
      //console.log('readyState',this.socket.readyState)
      setTimeout(() => {
        this.send(data);
      },100);
    }else{
      this.socket.send(JSON.stringify(data));
    }
    //this.socket.send(JSON.stringify(data))
  }
  emit(data) {
    return new Promise(resolve => {
      this.socket.send(JSON.stringify(data))
      this.on('message', data => {
        resolve(data)
      })
    })
  }
  onMessage(message) {
    try {
      const data = JSON.parse(message)
      this.onReceiver({ Event: 'message', Data: data })
    } catch (err) {
      console.error(' >> Data parsing error:', err)
    }
  }
  checkHeartbeat() {
    const data = {
      'type': 'ping',
      'args': [Date.parse(new Date())]
    }
    this.send(data)
  }
  onError(err) {

  }
  onReceiver(data) {
    const callback = this.messageMap[data.Event]
    if (callback) callback(data.Data)
  }
  on(name, handler) {
    this.messageMap[name] = handler
  }
  doClose() {
    this.socket.close()
  }
  destroy() {
    if (this.heartBeatTimer) {
      clearInterval(this.heartBeatTimer)
      this.heartBeatTimer = null
    }
    this.doClose()
    this.messageMap = {}
    this.connState = 0
    this.socket = null
  }
}

export default socket

Answer 2

websocket 1秒刷新渲染列表循环，处理方法清除列表重新等待渲染么？