VUE学习17：消息订阅与发布 PubSubJS安装使用

本文介绍了pubsubjs安装与使用，PubSubJS 是一个用 JavaScript 编写的基于主题的 发布 订阅库。 PubSubJS 有同步解耦，所以主题是异步发布的。这有助于使您的程序保持可预测性，因为在消费者处理主题时，主题的发起者不会被阻止。

PubSubJS 可以在任何可以执行 JavaScript 的地方运行，所以VUE上也可以使用。

一、安装方法

通过 npm ( npm install pubsub-js)安装

npm i pubsub-js

注意，安装时，以管理员的方法打开vscode之类的工具，且要带-js，否则安装是另一个库

二、使用方法

方式一：main.js中全局导入pubsub-js

import PubSub from 'pubsub-js'
Vue.use(PubSub)

基本使用方法（不同组件之间的传值）

传值：
const PubSub = require('pubsub-js')
PubSub.publish('data', 'data')
接值：
const PubSub = require('pubsub-js');  
PubSub.subscribe('data',(msg,data)=>{
  console.log(data)
});

方式二：也可以在.VUE中引入pubsub-js（小编实测）

比如student.vue向school.vue传学生姓名，在student.vue和school.vue都中引入

import pubsub from 'pubsub-js'

然后在school.vue在写个挂载钩子

  mounted() {
    pubsub.subscribe('hello',function(msnName,data){
        console.log('有人发布了消息，hello消息的回调执行了'msnName,data);
    })
  },

接着在student.vue写个methods

  methods: {
    // sendStudentName 是在button上定义的@click事件名
    sendStudentName() {
      pubsub.publish('hello',666)
    },
  },

为了更完美，可以在school.vue写个取消订阅

此时注意，school.vue的挂载钩子要写成这样，也就是加个 this.pubID = ：

  mounted() {
    this.pubID = pubsub.subscribe('hello',function(msnName,data){
        console.log('有人发布了消息，hello消息的回调执行了'msnName,data);
    })
  },

取消订阅写法：

  beforeDestroy() {
    pubsub.unsubscribe(this.pubID)
  },

这样可以了~

三、异常解决方法

假如运行时出现如下提示：

Can't resolve 'pubsub-js' in 'D:\GIT-study\vue_study\src\components'

异常原因：npm 默认的安装是是最终版本的，可能是 版本太高了，然后出现这个问题。

解决方法：安装旧点的版本

先删除

npm uninstall pubsub-js

查看所有版本

npm view pubsub-js versions

选择合适的版本安装，比如

npm install pubsub-js@1.6.0

就可以了~