Vue项目如何跨组件调用依赖Google Map的内部deletePoint函数

下面是Vue项目中通用的3种实现方案，可根据你的项目结构选择：

方案1：全局事件总线（适配Vue2/Vue3，适用于任意组件关系） #

在地图组件中监听自定义事件，其他组件通过触发事件间接调用deletePoint方法，不需要暴露地图实例。

// 第一步：地图组件Component.Vue中新增监听逻辑
import { onMounted, onUnmounted } from 'vue'
// Vue3可直接使用mitt轻量事件库，Vue2直接用this.$bus即可
import emitter from '@/utils/emitter'

onMounted(() => {
  // 监听自定义删除事件，触发时执行deletePoint
  emitter.on('trigger-delete-point', deletePoint)
})
onUnmounted(() => {
  // 组件销毁时移除监听，避免内存泄漏
  emitter.off('trigger-delete-point', deletePoint)
})

// 第二步：调用方组件中触发事件即可
import emitter from '@/utils/emitter'

// 点击删除按钮时执行
const handleDelete = () => {
  emitter.emit('trigger-delete-point')
}

方案2：provide/inject（适用于有父子/后代层级关系的组件） #

在地图组件中对外暴露deletePoint方法，所有后代组件可以直接注入调用。

// 第一步：地图组件Component.Vue中导出方法
import { provide } from 'vue'

provide('deletePoint', deletePoint)

// 第二步：后代调用组件中注入方法直接使用
import { inject } from 'vue'

const deletePoint = inject('deletePoint')
// 点击删除按钮时直接调用即可
const handleDelete = async () => {
  await deletePoint()
}

方案3：全局状态管理（Pinia/Vuex，中大型项目优先推荐） #

把地图实例和相关操作方法统一封装到全局store，所有组件都可以直接访问调用，维护性最高。

// 第一步：新建store文件stores/map.js
import { defineStore } from 'pinia'

export const useMapStore = defineStore('map', {
  state: () => ({
    mapInstance: null
  }),
  actions: {
    // 地图组件初始化完成后调用该方法存下实例
    setMapInstance(map) {
      this.mapInstance = map
    },
    // 把deletePoint逻辑移到store中
    async deletePoint(adventureId, id, singlePointDetails) {
      await points.listPoint(adventureId, id)
        .then(async () => {
          await this.mapInstance.circles[singlePointDetails.sort].setOptions({ label: '', icon: '', opacity: 0, editable: false, clickable: false })
          await this.mapInstance.circles[singlePointDetails.sort].Circle.setOptions({ fillOpacity: 0, strokeOpacity: 0, editable: false, clickable: false })
          await this.mapInstance.circles[singlePointDetails.sort].setMap(null)
          await this.mapInstance.circles.splice(singlePointDetails.sort, 1)
        })
      await points.deletePoint(adventureId, id)
    }
  }
})

// 第二步：地图组件初始化完成后存储实例
const mapStore = useMapStore()
// 地图实例赋值完成后执行
mapStore.setMapInstance(map.value)

// 第三步：任意组件调用
import { useRoute } from 'vue-router'
import { useMapStore } from '@/stores/map'

const route = useRoute()
const mapStore = useMapStore()

const handleDelete = async () => {
  await mapStore.deletePoint(route.params.adventureId, route.params.id, points.singlePointDetails)
}

• 调用deletePoint前要确保地图组件已经挂载、地图实例已经初始化完成，避免出现undefined报错
• 方法入参可根据你的实际业务需求自行调整传递

内容的提问来源于stack exchange，提问作者Dave