Vue3 Composition API导入外部逻辑失败？解决TS报错与注入问题

1. 修正打印逻辑文件的导出格式 #

你遇到的Declaration or statement expected.ts(1128)错误是因为export Print的语法不符合TS规范。正确做法是把打印逻辑封装成组合式函数，统一管理生命周期钩子和方法：

// printLogic.ts
import { onMounted, onBeforeUnmount } from 'vue'

export function usePrintLogic() {
  // 实现打印方法
  const Print = () => {
    // 你的打印业务逻辑
    console.log('执行打印操作')
  }

  // 实现关闭打印模式方法
  const DisablePrintMode = () => {
    // 关闭打印模式的业务逻辑
    console.log('退出打印模式')
  }

  // 注册生命周期钩子
  onMounted(() => {
    // mounted阶段执行的打印初始化逻辑
    console.log('打印逻辑挂载完成')
  })

  onBeforeUnmount(() => {
    // 卸载前执行的打印清理逻辑
    console.log('打印逻辑即将卸载')
  })

  // 对外暴露需要的方法
  return {
    Print,
    DisablePrintMode
  }
}

2. 在主组件中正确引入使用 #

在script setup组件中调用组合式函数，即可自动注入生命周期钩子，同时获取需要的方法：

<script setup lang="ts">
import { usePrintLogic } from './printLogic.ts'

// 调用组合式函数，自动绑定生命周期，拿到暴露的方法
const { Print, DisablePrintMode } = usePrintLogic()

// 绑定到组件事件
const handlePrint = () => Print()
const handleDisablePrint = () => DisablePrintMode()
</script>

<template>
  <button @click="handlePrint">触发打印</button>
  <button @click="handleDisablePrint">关闭打印模式</button>
</template>

3. 原方案无效的原因 #

之前的注入方式不生效，是因为Vue3的生命周期钩子必须在组件实例上下文（script setup内部、组合式函数内部）调用才能绑定到组件。直接导出钩子函数导入，无法自动关联到当前组件实例；而组合式函数的写法，会在调用时自动将内部的钩子注册到当前组件，完全符合Composition API的规范。

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