如何在Vue组件的外部函数中访问computed计算属性的值

你现在的代码无法获取transferType有两个核心问题：

• 你把checkType定义在组件导出对象的外部，不属于组件实例的方法，天然拿不到组件实例的this
• 你用了箭头函数定义checkType，箭头函数的this在定义时就绑定了上层作用域，不会指向组件实例

方案1：将函数纳入组件methods（最常用，适用于仅当前组件使用的场景） #

把checkType放到组件的methods配置项中，用普通函数定义，即可通过this直接访问计算属性：

<script>
export default {
  data: () => ({/*some data*/}),
  computed: {
    transferType() {
      // 此处可简化为直接返回判断结果，无需写if分支
      return this.$store.state.transfer.type === 'one way'
    }
  },
  methods: {
    checkType(value) {
      // 这里可以正常拿到transferType
      console.log(this.transferType)
      return !!value
    }
  }
}
</script>

方案2：把需要的属性作为参数传入（适用于函数需要跨组件复用的场景） #

如果checkType是多个组件通用的公共函数，你可以在组件内调用它的时候，把transferType作为参数传递进去：

<script>
// 该函数可以单独抽离到公共工具文件中
const checkType = (value, transferType) => {
  console.log(transferType)
  return !!value
}

export default {
  data: () => ({/*some data*/}),
  computed: {
    transferType() {
      return this.$store.state.transfer.type === 'one way'
    }
  },
  methods: {
    // 调用的时候传入计算属性即可
    someMethod(value) {
      return checkType(value, this.transferType)
    }
  }
}
</script>

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