1.监听 vuex 中数据的变化，当变化时调用相应的回调函数

如果我们只需要监听数据变化，并把变化后的数据应用到页面上，我们只需要写个计算属性返回 store 中的值就可以了，但是这里的场景是我们要在变化时调用相应的回调函数！（应用场景：封装统一的tabel 并加入分页功能，分页功能可以存在 vuex 中，但是不如直接pubsub发布订阅更好）

错误的思路：

1.使用计算属性，然后用 watch 监听计算属性并调用回调函数 ——> 错误，watch 无法监听 computed 的属性，只能监听 data 中定义的属性！

2.使用 watch 监听 data 中的属性 ——> 错误，data 中取 store 的内容根本无法感知到变化，所以监听不到！

正确的方法：使用 vuex 的subscribe订阅方法

created() {
  // 注册监听器，监听 count 的变化
  this.$store.subscribe((mutation, state) => {
    if (mutation.type === "changeHandleSize") { //对应的 vuex 的 mutation方法名，当这个mutation被调用的时候就会触发这个订阅了！
      // 在 handleSize 变化时调用你想要的回调函数
      this.Search();
    }
    if (mutation.type === "changeHandleCurrent") {
      // 在 handleCurrent 变化时调用你想要的回调函数
      this.Search();
    }
  });
},

2.pubsub消息订阅发布的回调函数

基本写法：

npm i pubsub-js

import pubsub from 'pubsub-js'

pubsub.publish('eventName',this.name) //发布消息，把this.name作为 data 传过去

methods:{
  methodDemo(msgName,data) {
    console.log('我是School组件，收到了数据：',data)
  }
},
mounted() {
	this.pubId = pubsub.subscribe('eventName',this.methodDemo) //订阅消息传入一个回调函数
},
beforeDestroy() {
  pubsub.unsubscribe(this.pubId) //取消订阅
}

或者这样写：在订阅的时候，直接传入回调函数

this.pubId1 = pubsub.subscribe("changeSize", (_, data) => {
  this.pageSize = data;
  this.Search();
});

this.pubId2 = pubsub.subscribe("changeCurrent", (_, data) => {
  this.pageCurrent = data;
  this.Search();
});

注意：如果只是需要通讯，而不需要全局存储状态，那么就用 pubsub 就可以了，不需要用 vuex