Vue组件能否将props传入mapGetters？通用输入组件取值异常排查

嘿，这个问题我之前开发通用表单组件时也碰到过，咱们一步步拆解解决～

首先得搞明白为啥改用mapGetters后this.dataModel和this.propertyName会变成undefined：你尝试直接在mapGetters里用this访问props的时候，组件实例还没创建出来呢！mapGetters是在组件选项初始化阶段执行的，这时候的this根本不是组件实例，自然拿不到props里的属性，所以才会出现undefined的情况。而且mapGetters本身并不支持直接传入props参数，它的核心作用是把Vuex里的getter直接映射成组件的计算属性，默认是无参调用的。

那该怎么解决呢？给你两个实用的方案：

方案一：让Getter返回函数，结合mapGetters+自定义计算属性 #

这种方式既能复用mapGetters，又能灵活传入props参数，是我最常用的方法：

第一步：修改Vuex里的Getter，让它返回一个函数 #

把需要动态参数的Getter改成返回函数的形式，这样后续就能传入dataModel和propertyName了：

// store/modules/form.js
export default {
  state: {
    formData: {
      userInfo: { name: '', age: '' },
      orderInfo: { id: '', amount: '' }
    }
  },
  getters: {
    // 返回一个函数，接收dataModel和propertyName参数
    getFormValue: (state) => (dataModel, propertyName) => {
      return state.formData[dataModel]?.[propertyName] || ''
    }
  }
}

第二步：组件中结合mapGetters和自定义计算属性 #

先通过mapGetters把这个Getter映射到组件里，然后在自定义的计算属性里调用这个Getter函数并传入props参数：

// 你的通用输入组件
import { mapGetters } from 'vuex'

export default {
  props: ['dataModel', 'propertyName'],
  computed: {
    // 用mapGetters映射Getter
    ...mapGetters(['getFormValue']),
    // 自定义计算属性，传入props参数
    value() {
      // 这里的this指向组件实例，能正常访问props
      return this.getFormValue(this.dataModel, this.propertyName)
    }
  }
}

方案二：封装复用逻辑（Mixins/工具函数） #

如果你不想修改Getter的结构，也可以把最初的computed逻辑封装起来，方便多个组件复用：

方式1：用Mixins封装 #

// mixins/formValueMixin.js
export default {
  computed: {
    formValue() {
      return this.$store.getters.getFormValue(this.dataModel, this.propertyName)
    }
  }
}

然后在组件里引入：

import formValueMixin from './mixins/formValueMixin'

export default {
  props: ['dataModel', 'propertyName'],
  mixins: [formValueMixin],
  // 直接用this.formValue就能获取值
}

方式2：用工具函数封装 #

// utils/formHelper.js
export const getFormValue = function(dataModel, propertyName) {
  return this.$store.getters.getFormValue(dataModel, propertyName)
}

组件里使用时要绑定this：

import { getFormValue } from './utils/formHelper'

export default {
  props: ['dataModel', 'propertyName'],
  computed: {
    value() {
      // 用call绑定组件实例的this
      return getFormValue.call(this, this.dataModel, this.propertyName)
    }
  }
}

最后再提醒一下：千万别尝试在mapGetters的映射语法里直接用this访问props，比如...mapGetters({ value: getFormValue/${this.dataModel} })这种写法肯定会报错，因为此时组件还没初始化，this根本不是你想要的组件实例～

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