Vue3 Options API下provide/inject传递响应式map对象失败求助

你的代码存在几个关键问题，导致注入的map对象返回undefined：

1. provide调用时机错误：在Vue 3 Options API中，provide必须作为组件的顶级选项声明，不能在methods内部调用。方法里的provide不会注册到组件的provide上下文，注入者自然无法获取到值。
2. 响应式变量更新错误：你直接赋值map = mapViewModel.getMap()，修改的是外部变量而非data中的响应式map，导致computed无法跟踪其变化。
3. inject使用方式错误：Options API中inject需要作为组件选项配置，不能在组件外部用const声明。

修正后的提供者组件 #

import { computed } from 'vue';

export default {
  data() {
    return {
      map: null, // 初始化为null，确保是响应式变量
    };
  },
  // 顶级选项声明provide，绑定响应式map
  provide() {
    return {
      [SysConstants.PROVIDE_KEY_MAP_INSTANCE.description]: computed(() => this.map),
    };
  },
  methods: {
    async renderMap() {
      // 修改响应式的this.map，而非外部变量
      this.map = await mapViewModel.getMap();
    },
  },
};

修正后的注入者组件 #

export default {
  // 作为组件选项配置inject，指定要注入的key
  inject: [SysConstants.PROVIDE_KEY_MAP_INSTANCE.description],
  methods: {
    onDigitizePolygon() {
      // 通过this访问注入的变量
      console.info(debugTag, 'mapInstance:', this[SysConstants.PROVIDE_KEY_MAP_INSTANCE.description]);
      
      // 可选：给inject起别名，方便调用
      // inject: {
      //   mapInstance: {
      //     from: SysConstants.PROVIDE_KEY_MAP_INSTANCE.description
      //   }
      // },
      // 然后直接用this.mapInstance访问
    },
  },
};

额外说明 #

• 确保SysConstants.PROVIDE_KEY_MAP_INSTANCE.description是固定字符串，避免因值动态变化导致注入匹配失败。
• 如果mapViewModel.getMap()是异步操作，必须加await确保拿到完整的map实例后再赋值给this.map。
• 用computed包裹this.map，可以保证注入者拿到的是响应式引用，当this.map更新时，注入者能自动感知变化。

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