vue3 中，如何使用 MQTT 或 websocket 统一接收数据，页面单独处理数据

[jahnsli]

vue3 中，如何使用 MQTT 或 websocket 统一接收数据，页面中单独处理数据

mqtt.js


  const onConnected = () => {
    onMessage();
  }
  
  const onMessage = (data) => {
  	const {obj1,obj2} = data
    // 如何在这里将 obj1 数据传递 page1 ，将 obj2 数据传递 page2
  }

page1

在这里只接收 obj1 数据

page2
在这里只接收 obj2 数据

[vace]

1. pinia 或者 vuex 之类的状态管理同步
2. event bus: https://v3-migration.vuejs.org/breaking-changes/events-api.html

bus.$emit('message-1', obj1)
bus.$emit('message-2', obj2)

page1:
bus.$on('message-1', ...)
page2:
bus.$on('message-2', ...)

[pubby]

vuex 之类的，在 app 里 commit 消息

page 里各自 subscribe ，取需要的数据

[hb1988]

补充 rxjs ; customEvent ；

[musi]

存到 store 里，然后页面自己拿

[erhsilence]

mitt

[jahnsli]

@vace event bus 或许可以，如果 pinia 的话 obj1 obj2 都存在一起，可能会很臃肿

[jahnsli]

@pubby 没太理解~~ 是否可以提供个简单的 demo

[jahnsli]

@musi 如果 pinia 的话 obj1 obj2 都存在一起，可能会很臃肿

[jahnsli]

@erhsilence 想到这个，但不知道还有没有更好的方案

[jahnsli]

@hb1988 单独引入 rxjs ，是否有点多余， customEvent 或许可以

[lingxiaoli]

@jahnsli #8 你就是用两个文件来定义 store 来存 最后还是在内存里 不清楚你所谓的不臃肿意义在哪里?

[musi]

@jahnsli #8
1. 只要你需要用数据，数据就会存在内存里，引用数据类型存多次也只是引用存了多次
2. 如果你不需要数据，置为 null 就是

[rm0gang0rf]

在下全局变量了，刚刚写完。。是不是很 low~