Vue.js中如何将Getter获取的值设为Prop的默认值？

由于Vue组件的Prop默认值在实例初始化前就会被执行，此时计算属性（包括mapGetters生成的）还未完成初始化，所以无法直接在Prop的default选项中引用getId。可以通过以下两种方案实现需求：

方案一：使用计算属性合并Prop与Getter值（推荐） #

直接定义一个计算属性，优先使用传入的userID，如果未传入则使用getId的值，组件内部统一使用这个计算属性：

export default {
  props: {
    userID: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters('Auth', ['getId']),
    // 实际使用的用户ID
    actualUserID() {
      return this.userID || this.getId
    }
  }
}

之后在组件模板或逻辑中，用actualUserID替代userID即可。

方案二：通过Watch监听同步值 #

如果需要将默认值同步回父组件（比如使用v-model场景），可以通过Watch监听userID和getId的变化，在未传入userID时更新值：

export default {
  props: {
    userID: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters('Auth', ['getId'])
  },
  watch: {
    // 初始化时立即检查并赋值
    userID: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          this.$emit('update:userID', this.getId)
        }
      }
    },
    // 当Getter的值变化时，若未传入userID则同步更新
    getId(newVal) {
      if (!this.userID) {
        this.$emit('update:userID', newVal)
      }
    }
  }
}

父组件需要使用v-model:userID="xxx"来接收更新。

如果不需要同步父组件，也可以在组件内部维护一个data变量：

export default {
  props: {
    userID: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      internalUserID: this.userID
    }
  },
  computed: {
    ...mapGetters('Auth', ['getId'])
  },
  watch: {
    userID(newVal) {
      this.internalUserID = newVal || this.getId
    },
    getId(newVal) {
      if (!this.userID) {
        this.internalUserID = newVal
      }
    },
    immediate: true
  }
}

内容的提问来源于stack exchange，提问作者Daniel Gironés