V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jahnsli
V2EX  ›  Vue.js

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

  •  
  •   jahnsli · 2023-03-26 21:56:50 +08:00 · 2526 次点击
    这是一个创建于 599 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    mqtt.js
    
    
      const onConnected = () => {
        onMessage();
      }
      
      const onMessage = (data) => {
      	const {obj1,obj2} = data
        // 如何在这里将 obj1 数据传递 page1 ,将 obj2 数据传递 page2
      }
    
    
    page1
    
    在这里只接收 obj1 数据
    
    page2
    在这里只接收 obj2 数据
    
    13 条回复    2023-04-03 13:57:19 +08:00
    vace
        1
    vace  
       2023-03-26 23:01:33 +08:00
    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
        2
    pubby  
       2023-03-26 23:06:34 +08:00 via iPhone
    vuex 之类的,在 app 里 commit 消息

    page 里各自 subscribe ,取需要的数据
    hb1988
        3
    hb1988  
       2023-03-27 08:34:49 +08:00
    补充 rxjs ; customEvent ;
    musi
        4
    musi  
       2023-03-27 08:39:37 +08:00
    存到 store 里,然后页面自己拿
    erhsilence
        5
    erhsilence  
       2023-03-27 08:55:21 +08:00
    mitt
    jahnsli
        6
    jahnsli  
    OP
       2023-03-27 09:59:29 +08:00
    @vace event bus 或许可以,如果 pinia 的话 obj1 obj2 都存在一起,可能会很臃肿
    jahnsli
        7
    jahnsli  
    OP
       2023-03-27 10:00:28 +08:00
    @pubby 没太理解~~ 是否可以提供个简单的 demo
    jahnsli
        8
    jahnsli  
    OP
       2023-03-27 10:00:45 +08:00
    @musi 如果 pinia 的话 obj1 obj2 都存在一起,可能会很臃肿
    jahnsli
        9
    jahnsli  
    OP
       2023-03-27 10:01:06 +08:00
    @erhsilence 想到这个,但不知道还有没有更好的方案
    jahnsli
        10
    jahnsli  
    OP
       2023-03-27 10:01:40 +08:00
    @hb1988 单独引入 rxjs ,是否有点多余, customEvent 或许可以
    lingxiaoli
        11
    lingxiaoli  
       2023-03-27 10:37:15 +08:00
    @jahnsli #8 你就是用两个文件来定义 store 来存 最后还是在内存里 不清楚你所谓的不臃肿意义在哪里?
    musi
        12
    musi  
       2023-03-27 11:28:53 +08:00
    @jahnsli #8
    1. 只要你需要用数据,数据就会存在内存里,引用数据类型存多次也只是引用存了多次
    2. 如果你不需要数据,置为 null 就是
    rm0gang0rf
        13
    rm0gang0rf  
       2023-04-03 13:57:19 +08:00
    在下全局变量了,刚刚写完。。是不是很 low~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2834 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:48 · PVG 21:48 · LAX 05:48 · JFK 08:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.