Vue3 composable中使用柯里化(curried)函数不生效问题咨询

问题原因 #

• 核心是对柯里化函数的行为理解存在偏差：柯里化函数不会修改自身状态，每次传入部分参数调用时，只会返回一个接收剩余参数的新函数，原柯里化函数本身不会发生任何变化。
  你在composable中执行的curriedReferralCode(affiliateUserId)没有将返回的绑定了第一个参数的新函数保存，最终return给组件的还是原始的、需要接收2个参数的柯里化函数。
  所以组件里调用this.curriedReferralCode(payload)只传入了1个参数，参数数量不足，只会返回一个等待接收第二个参数的新函数，不会执行原函数的打印逻辑，自然没有输出。
  而this.curriedReferralCode(3)(payload)是先传入第一个参数得到绑定后的新函数，立刻传入第二个参数调用，参数满足触发原函数要求，所以能正常输出。

修复方案 #

修改composable的逻辑，将绑定了第一个参数的柯里化函数返回即可：

export default function useReferralCodes(affiliateUserId) {
  const createReferralCode = (affiliateUserId, payload) => {
    console.log('affiliateUserId', affiliateUserId)
    console.log('payload', payload)
  }

  const curriedReferralCode = curry(createReferralCode)
  // 保存绑定了第一个参数的新函数
  const boundReferralCode = curriedReferralCode(affiliateUserId)

  return {
    createReferralCode,
    curriedReferralCode: boundReferralCode
  }
}

修改后组件中调用this.curriedReferralCode(payload)即可正常执行打印逻辑。

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