如何在多个Vue 2组件间共享单个Leaflet地图实例？

你当前用provide/inject的思路是可行的，但可以做优化——没必要暴露整个父组件实例，直接提供地图实例本身更清晰，也能避免不必要的属性访问：

优化后的 Provide/Inject 方案 #

App.vue 代码 #

provide() {
  return {
    leafletMap: null // 先初始化占位
  };
},
mounted() {
  this.map = L.map('map', {});
  this._provided.leafletMap = this.map; // 地图实例创建后更新provide的值
}

子组件代码 #

inject: ['leafletMap'],
mounted() {
  // 直接使用注入的地图实例
  if (this.leafletMap) {
    L.marker([51.505, -0.09]).addTo(this.leafletMap);
  }
}

更推荐的全局共享方案：Vuex 状态管理 #

如果你的应用组件层级复杂，或者需要在更多无关联组件中访问地图实例，用Vuex存储会更灵活：

1. 定义 Vuex Store #

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    leafletMap: null
  },
  mutations: {
    SET_MAP(state, mapInstance) {
      state.leafletMap = mapInstance
    }
  },
  actions: {
    initMap({ commit }, mapOptions) {
      const map = L.map('map', mapOptions)
      commit('SET_MAP', map)
    }
  },
  getters: {
    getMap: state => state.leafletMap
  }
})

2. 在 App.vue 中初始化地图 #

mounted() {
  this.$store.dispatch('initMap', {})
}

3. 子组件中访问地图实例 #

computed: {
  map() {
    return this.$store.getters.getMap
  }
},
mounted() {
  if (this.map) {
    // 执行地图操作
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map)
  }
}

不推荐的方案：全局变量 #

虽然可以直接把地图实例挂到Vue原型上（Vue.prototype.$leafletMap = L.map('map', {})），或者用window全局变量，但这种方式不利于代码维护和调试，大型应用中不建议使用。

方案选择建议 #

• 组件层级简单、仅在父子/祖孙组件间共享：用优化后的Provide/Inject
• 应用复杂、多组件跨层级共享：用Vuex状态管理

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