关于组件之间传值问题（vuex和事件总线）

问题背景：

我的项目需求只有一个页面，但是页面中存在着两个不同的组件需调用同一接口的需求。为了节省性能，我首先考虑的是使用vueX来将请求的数据存储下来调用，但是数据量小的时候，页面显示的数据正常，但当我请求的数据量很大的时候，一个组件加载的数据是之前的旧数据，并不是新请求出来的数据。所以我换成了事件总线的方式请求。

vuex的方式：

1、在store文件下的 index.js文件中写入存储数据的方法：

2、在其中一个组件中使用dispatch方法请求数据

 mounted() {
        this.$store.dispatch('getCompanyData',this.townName).then(()=>{
       this.getCompanyList()
     })
  },

3、在另一个组件中拿取数据

 mounted() {

    setTimeout(() => {
      this.getCompanyList()
    },500)

  },
  computed: {
    getData() {
      return this.$store.state.companySending
    }
  },
  methods: {
     getCompanyList() {
       let val = this.getData
       if (val.length >0){
         val.forEach(item => {
           this.option.data.push([
             item.expressCompany,
             item.totalCount
           ])
         })
       }
    },

上面的方式就是使用vuex方式存储数据，但是由于技术太low，没实现想要的效果，换成了下面的事件总线

---

---

事件总线：

1、在其中一个组件中请求数据，通过$emit（）方法发送数据

2、在需要数据的组件中使用$on()方法监听获取数据

 created() {
    this.$bus.$on('sendCompany', msg => {
      if (msg) {
        msg.forEach(item => {
          this.option.data.push([
            item.expressCompany,
            item.totalCount
          ]);
        })

        this.option = {...this.option}
      }
    })
  },
  beforeDestroy() {
    this.$bus.$off('sendCompany')
  }

注意的是，还需要使用$off()方法，防止内存泄漏

至此，完成想要的效果