vue 2.0使用bus总线的方式实现非父子关系的组件通信时,如果B组件还未初始化,如何收取到A组件发出的消息?

faker
  • 262

现在有两个组件:A和B, A使用emit发出消息, B组件在created的时候使用on监听A发出的消息并处理。

问题是:如果B组件还未被初始化,那么就收不到A发出的消息了。

举个例子:

// 组件A:加入购物车
addCart (event) {
  if (!this.showSkuSelector) {
    this.showSkuSelector = true
  } else {
    if (this.skuId !== -1) {
      this.errMsg = '成功加入购物车'
      this.showError = true
      this.$root.bus.$emit('add-cart', 1)
      setTimeout(() => {
        this.showSkuSelector = false
        this.$router.push('ShoppingCar')
      }, 2000)
    }
  }
},
// 组件B:在购物车组件内监听详情页发出的通知,并做处理
created () {
    this.$root.bus.$on('add-cart', this.addCart)
},

如上面这个例子, 如果B组件还未被用户打开过,就收不到这个消息了。

请问在不使用vuex的情况下,如何解决这个问题?

回复
阅读 3.1k
4 个回答
✓ 已被采纳

没有初始化,当然接收不到消息。你可以在 $root 上维护一个数组或者对象 carts,add-cart 之后把添加的 cart 放到 carts 里,购物车组件初始化后,再从 $root 中获取这个 carts ,再执行对应的逻辑。

idleb
  • 277

死胡同,无论是注册/监听机制,还是全局状态,想好获得子组件想要获得某个状态的变化,肯定得从某个全局变量里查。不用vuex的话,可以在已创建的父级组件监听,再传给子组件

最好使用vuex,也可以把状态放在sessionStorage和localStorage里,另外也可以,每次打开购物车的时候请求远程数据,获取最新的购物车列表。

典型的 QQ离线消息 模式,建议你阅读JS观察者模式中如何设计这种离线消息接受的相关内容。

宣传栏