对于具有组合 api 和 class 组件的 vue 2，此表达式不可调用

Question

我正在尝试在 vue2 项目 + class 组件 + typescript 上使用组合 api 插件。组合本身工作正常，但似乎没有工作。

作文api：https://github.com/vuejs/composition-api

我的可重复组合。

import { defineComponent, reactive, ref, toRefs } from "@vue/composition-api";

const userConfiguration = defineComponent({

setup() {
    const val = ref("");
    const breweries = reactive({ list: [] });
    const submitted = async () => {
        console.log("submitted called");
    };
    return { val, ...toRefs(breweries), submitted };
},
// type inference enabled
});

export { userConfiguration };

组件函数：

@Component({
name: "menu",
components: {
    ...
},
setup() {
    const state = reactive({
        name: "Link",
    });
    const  val  = userConfiguration();
    return { ...toRefs(state), val };
},
})

我收到错误 This expression is not callable

 userConfiguration()

defineComponent结果的签名：

declare function defineComponent<RawBindings, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin = {}, Extends = {}, Emits extends EmitsOptions = {}>(options: ComponentOptionsWithoutProps<{}, RawBindings, D, C, M, Mixin, Extends, Emits>): VueProxy<{}, RawBindings, D, C, M, Mixin, Extends, Emits>;

我正在使用

    "typescript": "^4.2.2",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.6",
    "@vue/composition-api": "^1.4.9",

Answer 1

试试下面的代码

import { reactive, ref, toRefs } from '@vue/composition-api';

export function userConfiguration() {
  const val = ref('');
  const breweries = reactive({ list: [] });
  const submitted = async () => {
    console.log('submitted called');
  };
  return { val, ...toRefs(breweries), submitted };
}

对于具有组合 api 和 class 组件的 vue 2，此表达式不可调用

This expression is not callable for vue 2 with composition api and class component

vue.js

typescript1.4

vuejs2

vue-class-components

vue-composition-api