自定义事件与全局通信

vue3中使用全局事件总线，借助vuex管理全局变量，可以实现任意两个组件之间的通信。

效果：
点击区域图或者条形图的地图块或者柱形，可以实现从Home组件到Result组件的跳转，并且直接选中对应的省份并进行筛选展示。

事件的定义与触发

由此可以看出，涉及两个组件的通信：Home组件和Result组件。
而双方通信的数据是Result组件中的selectProvince（选中省份信息），因此在vuex中定义一个共享数据province。

事件的定义

首先我们需要在Home组件定义一个自定义事件（event），命名为events_ClickMap，这个事件的回调将会是最后调用的。

// 定义自定义事件
useAppEvents('events_ClickMap', (option: string) => {
  store.commit('FILTER_UPTATE', option)
  handleClick2FilterResult()
})

在事件的回调中，需要利用mutations中的方法对共享数据进行修改，并且实现路由跳转。

// filter.ts文件
export interface FilterCondition {
  province: string
}

const state: FilterCondition = {
  province: '',
}

const mutations = {
  FILTER_UPTATE: (state: FilterCondition, province: string): void => {
    state.province = province
  },
}

export default {
  namespace: true,
  state,
  mutations,
}

事件的触发

触发事件直接在于点击图中的元素（地图块或者柱形），因此为每一个元素绑定上之前定义的自定义事件events_ClickMap即可。

// 绑定自定义事件
  mapChart.on('mouseup', (event: any) => {
    emitAppEvent('events_ClickMap', event.name)
  })

事件的event触发时会接收到参数，其中的name属性指向了点击元素的省份名。