你遇到的这个问题其实是Vue实例生命周期的机制导致的——Vue在实例初始化的早期阶段就已经完成了computed选项的解析和响应式绑定，等到created钩子执行的时候，这些初始化工作早就结束了。所以你修改this.$options.computed只是改了选项对象本身，并不会让Vue把新的getters绑定到实例上，这就是为什么控制台能看到$options里有内容，但DevTools里显示undefined的原因。

具体原因拆解 #

Vue实例的初始化流程里，computed属性的处理是在initState步骤完成的，这个步骤发生在beforeCreate钩子之后、created钩子之前。在这个阶段，Vue会遍历computed选项里的每一项，把它们转换成响应式的getter/setter，并绑定到实例上。一旦这个过程结束，后续修改$options.computed不会触发任何重新解析的逻辑，自然新添加的getters不会生效。

正确的实现方式 #

根据你的需求，分两种场景给出解决方案：

场景1：静态的store映射（stores是固定值）

如果你的stores是固定的，不需要动态获取，那最好在组件定义阶段就把mapGetters合并到computed选项里，这是Vue推荐的写法：

import { mapGetters } from 'vuex'

export default {
  computed: {
    // 先定义自己的本地computed属性
    localComputed() {
      return this.someData * 2
    },
    // 合并mapGetters的结果
    ...mapGetters(['userInfo', 'cartCount']),
    // 如果需要重命名，也可以用对象形式
    ...mapGetters({
      renamedUser: 'userInfo'
    })
  }
}

场景2：动态的store映射（stores是动态获取的，比如来自props/data）

如果你的stores是动态的（比如从父组件props传入，或者在created里才确定），那可以通过Object.defineProperty直接在实例上添加响应式的computed属性，这样Vue的响应式系统能正确识别到这些属性：

import { mapGetters } from 'vuex'

export default {
  props: ['stores'],
  created() {
    // 获取映射后的getters对象
    const mappedGetters = mapGetters(this.stores)
    // 遍历每个getter，绑定到实例上
    Object.keys(mappedGetters).forEach(key => {
      Object.defineProperty(this, key, {
        get: mappedGetters[key],
        enumerable: true, // 让属性能被遍历到
        configurable: true // 允许后续修改
      })
    })
  }
}

这样处理后，新添加的getters会成为实例的响应式属性，DevTools里也能正常显示它们的值。

额外提醒 #

尽量避免直接修改this.$options，这属于绕过Vue的标准生命周期和API的操作，容易引发不可预期的问题。如果是需要复用映射逻辑，推荐用Vue的mixins来封装，比如：

// 定义一个mixin
const storeMixin = {
  computed: {
    ...mapGetters(['commonGetter1', 'commonGetter2'])
  }
}

// 在组件中使用
export default {
  mixins: [storeMixin],
  computed: {
    // 组件自己的computed
  }
}

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