Vue3 Options API组件如何调用Composition API编写的外部文件中的方法

• 导入错误：你当前language.js默认导出的是language组合式函数，而非直接导出languageText方法，导入后直接调用不符合导出规则。
• 上下文不匹配：useStore、useI18n这类Vue3组合式API只能在组件setup函数的同步执行阶段调用，在Options API的methods中直接调用时，没有对应的组件实例上下文，会执行失败。

在Options API组件中新增setup选项，提前调用组合式函数获取languageText方法并暴露给组件实例，之后在methods中通过this调用即可。

修改后的Form.vue完整代码如下：

<script>
// 注意：这里导入的是默认导出的组合式函数，不是直接导入languageText
import language from '@/composables/language';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Form',
  props: {
    processingData: Object,
    formData: Object
  },
  emits: ["gateway"],
  components: {
    Icon
  },
  // 新增setup选项，调用组合式函数获取方法
  setup() {
    const { languageText } = language();
    // 暴露给组件实例，后续可通过this访问
    return {
      languageText
    }
  },
  data() {
    return {
      fieldData: this.formData,
    }
  },
  methods: {
    languageSelector(data) {
      // 直接通过this调用已经初始化好的languageText方法
      const h = this.languageText(data)
      console.log(h)
      return this.languageText(data)
    },
  }
})
</script>

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