Vue github案例，全局事件总线，pubsub-js消息订阅与发布

效果图：

网上找到一篇详细的文章，记录一下：https://blog.csdn.net/m0_53022813/article/details/127418134

以下代码是成品，包含全局事件总线和pubsub-js消息订阅与发布两种方式

1，main.js 安装全局事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this // 安装全局事件总线
  }
}).$mount('#app')

<template>
  <div id="app">
    <Search/>
    <List/>
  </div>
</template>

<script>
import Search from './components/Search.vue'
import List from './components/List.vue'

export default {
  name:'App',
  components:{
    Search,List
  }
}
</script>

<style>

</style>

<template>
  <div>
    <!-- 展示用户列表 -->
    <ul v-show="info.users.length">
      <li v-for="user in info.users" :key="user.id">
        <a href="user.html_url" target="_blank">
          <img :src="user.avatar_url" alt="">
        </a>
        <br>
        {{user.login}}
      </li>
    </ul>
    <!-- 展示欢迎词 -->
    <h2 v-show="info.isFirst">欢迎使用！</h2>
    <!-- 展示加载中 -->
    <h2 v-show="info.isLoading">加载中...</h2>
    <!-- 展示错误信息 -->
    <h2 v-show="info.errMsg">{{info.errMsg}}</h2>
  </div>
  
</template>

<script>
import pubsub from 'pubsub-js'

export default {
  name:'List',
  data(){
    return {
      info:{
        isFirst:true, // 是否初次展示
        isLoading:false, // 是否加载中
        errMsg:'', // 错误信息
        users:[]
      }
    }
  },
  mounted() {
    // 方式一：全局事件总线
    // this.$bus.$on('updateListData',(dataObj)=>{
    //   // this.info = dataObj // 这样isFirst属性会丢失
    //   this.info = {...this.info,...dataObj} // 合并对象，重复的属性以后面为主
    // })
    // 方式二：pubsub-js消息订阅与发布
    this.updateListDataId = pubsub.subscribe('updateListData',(msg,dataObj)=>{
      this.info = {...this.info,...dataObj}
    })
  },
  beforeDestroy() {
    // this.$bus.$off('updateListData') // 解绑
    pubsub.unsubscribe(this.updateListDataId) // 取消订阅
  },
}
</script>

<style scoped>
  li{
    float: left;
    width: 200px;
    list-style: none;
    text-align: center;
  }
  li img{
    width: 100%;
    height: 200px;
  }
</style>

<template>
  <div>
    <input type="text" v-model="keyword">
    <button @click="searchUsers">搜索</button>
  </div>
</template>

<script>
import axios from 'axios'

import pubsub from 'pubsub-js'

export default {
  name:'Search',
  data(){
    return {
      keyword:''
    }
  },
  methods:{
    searchUsers(){
      // 全局事件总线
      // 请求前更新List数据-欢迎使用变成加载中
      // this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
      // axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
      //   response=>{
      //     // console.log(response.data);
      //     this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
      //   },
      //   error=>{
      //     // console.log(error.message);
      //     this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
      //   }
      // )
      // 消息订阅与发布
      pubsub.publish('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
      axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
        response=>{
          // console.log(response.data);
          pubsub.publish('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
        },
        error=>{
          // console.log(error.message);
          pubsub.publish('updateListData',{isLoading:false,errMsg:error.message,users:[]})
        }
      )
    }
  }
}
</script>

<style>

</style>