Vue3组合式API如何抽离包含watch的重复代码为跨组件复用函数

你这段是Vue3组合式API逻辑，可直接抽为自定义可组合函数（composable）实现跨组件复用，步骤如下：

步骤1：抽离公共逻辑为独立可组合函数 #

新建composables/usePrettifyMint.ts（JS项目对应后缀为.js），代码如下：

import { ref, watch } from 'vue'
// 入参为需要监听的mintPk的getter函数，保证响应式正常生效
export function usePrettifyMint(mintPkGetter: () => string) {
  const mint = ref<string>('')

  // 与原逻辑完全对齐：初始化直接调用格式化方法赋值
  prettifyMint(mintPkGetter())
    .then((m) => {
      mint.value = m
    })

  // 与原逻辑完全对齐：mintPk变化时校验长度后再格式化
  watch(mintPkGetter, async (newVal) => {
    if (newVal.length >= 32) {
      mint.value = await prettifyMint(newVal)
    }
  })

  return { mint }
}

步骤2：组件内调用 #

任意需要该逻辑的组件，只需一行代码即可完成原有全部功能：

import { usePrettifyMint } from '@/composables/usePrettifyMint'

// 传入payload.mintPk的getter函数即可
const { mint } = usePrettifyMint(() => payload.mintPk)

优化建议 #

• 如果payload.mintPk本身是顶层ref变量，可以调整可组合函数入参支持直接传入Ref<string>类型，进一步简化调用写法
• 后续如果需要调整逻辑，比如新增错误捕获、防抖处理、修改长度校验规则，仅需修改usePrettifyMint这一处，所有复用组件自动同步更新，无需逐个修改

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