weex从.we转.vue之BroadcastChannel

摘要：监听事件的实例测试结果测试过程先在未登录的情况下，访问页面然后点击个人信息进入到登录页面，登录成功后，发送通知，并返回到我的页面，正常情况下，我的页面会接收通知，并从本地获取新数据刷新的。

在weex中，从.we过度到.vue的过程中，很难规避的就是事件派发机制当中，对BroadcastChannel的替换，按照官方的推荐采用vuex去更换，但是我在浏览一遍vuex的文档之后，绝的在weex使用有点麻烦，就去社区溜达了一圈，看看有没有小伙伴们找到更合适的方法。

在一阵交流之后，根据大伙的推荐，在.vue文件中，都是采用 weex提供的globalEvent来处理。

这次的踩坑记，也是这个文档带来。下面我就来记录一下，这次踩坑的历程。

按照文档的要求，在fireGlobalEvent的时候，需要各端实现，因此按照要求在Objective-C，添加以下方法：

/**
 发送全局事件

 @param eventName 事件名称
 @param params 事件参数
 */
- (void)postGlobalEvent:(NSString *)eventName params:(NSDictionary *)params {
    [weexInstance fireGlobalEvent:eventName params:params];
}

并且暴露给weex使用： WX_EXPORT_METHOD(@selector(postGlobalEvent:params:))

准备好了这些，我就开始在.vue的文件中开始测试功能了。

我是直接在我的项目中修改原先的代码的，下面的demo，也是我代码的一部分，项目中广场页面中，navigator组件上消息的触发按钮，换成调用刚刚native中扩展的postGlobalEvent方法， square-header.vue代码如下:

下面是square.vue的监听事件的代码：

这样我就基本完成了，这个demo的所有工作，然后build,没有报错、最好run，打开这个页面，渲染成功，下面是我在点击搜索按钮，Xcode控制台的打印信息：

2017-06-22 10:47:53.338723 [fg128,128,128; [log]WXJSCoreBridge.m:110, jsLog: ~~~~~~~~globalEvent 已经发送了~~~~~~~~~~~~~~~~~  [;
2017-06-22 10:48:15.584984  [fg128,128,128; [log]WXJSCoreBridge.m:110, jsLog: ~~~~~~~~test1~~~~~~~~~~~~~~~~~ {"index":"current index is 1"}  [;

看到这结果，我表示心情还挺不错，因为还挺好用的，感觉一下子找到了好的方式去替换这些方法了。

就在我开心的劲头上，我继续开始了我实际方法的更换，首先第一个就是在登录成功后，要给多个页面(个人信息、权限相关的页面)发送通知，因此我开始了第二个测试，即在不同实例之间进行发送通知与监听。本以为信息十足的，结果出现的问题：

发送事件的实例：login.vue:

在上面代码中，可以定位到loginButtonClicked()方法，这是登录按钮执行的方面，在这个方法请求成功后，我会调用 utils.postGlobalEvent("login-success", "login succeed");方法，即发送一个全局事件的通知，名字叫做login-success；并在发送后返回到上一页面。

监听事件的实例： mine.vue