pubsub.js在react和vue中使用

pubsub 最基础 的使用方法
react和vue的组件通信都可以用这个第三方pubsub.js
一、react中使用
发布

import Pubsub from 'pubsub-js'
export const pubsubID = 'd806a360-21aa-406e-9e5f-7f375087514f'  // pubsub token
Pubsub.publish(StationStatisticsID, data)
// 或
PubSub.publishSync(StationStatisticsID, data)

订阅

import Pubsub from 'pubsub-js'
import {pubsubID} from 'xxx'

componentDidMount() {
	/**
	* 订阅
	*/
	pubsub = Pubsub.subscribe(pubsubID, (msg, data) => {
		console.log(msg) // 这里将会输出对应设置的 pubsubID
		console.log(data) // 这里将会输出对应设置的参数
	})
}
componentWillUnmount() {
	/**
	* 取消指定的订阅
	*/
	Pubsub.unsubscribe(pubsub)
	/**
	* 取消全部订阅
	*/
	PubSub.clearAllSubscriptions()
}

二、vue中使用：

//AddData.vue
import PubSub from 'pubsub-js';
 
//成功返回的方法
 
setTimeout(function(){
   PubSub.publish('change-color',{showTag:true});  //更新值为true，显示
   self.notify('添加成功!','success',3000);
},1000);
 
beforeRouteLeave (to, from, next) {
     console.log(to.path);
     next();
     if(to.path=='/storemanage'){   //判断点击跳转的路由path
        PubSub.publish('change-color',{showTag:false}); //在点击导航跳转的时候更新为false,隐藏
     }
}

// Home.vue 导航栏的组件
import PubSub from 'pubsub-js';
data(){
    return{
        showTag:false; //是否显示tag
    }
}
created(){
    PubSub.subscribe('change-color',(event,data)=>{
        self.showTag=data.showTag;
    })
}

更多用法请看：https://www.npmjs.com/package/pubsub-js