如何通过打字稿在Vue2中使用带有组合api的vue类组件答案

【问题标题】：How to use vue class component with composition api in Vue2 by typescript如何通过打字稿在Vue2中使用带有组合api的vue类组件
【发布时间】：2021-03-07 00:48:15
【问题描述】：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CustomerContext, getCustomerRepository } from '@/composables/customerRepository'

@Component
export default class CustomerList extends Vue {
  search = ''

  setup(): CustomerContext {
    const ctx = getCustomerRepository()
    return ctx
  }
}
</script>

在 Vue 2 中，我想通过 TypeScript 将 Composition API 与类组件样式一起使用，但我不确定我的语法是否正确。此外，setup() 函数没有被自动调用。

vue-class-component 可以在 TypeScript 中使用 Compostion API 吗？

【问题讨论】：

组合 API 是 Vue 3
@Daniel_Knights Vue 2 还通过插件支持 Composition API：@vue/composition-api

标签： typescript vue.js vuejs2 vue-composition-api

【解决方案1】：

Vue 2

首先，确保您已经为 Vue 2 安装了 @vue/composition-api 插件：

// main.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

然后将setup() 定义为@Component 选项（不是作为类方法）：

// MyComponent.vue
@Component({
  setup(props, context) {
    //...
  }
})
export default class CustomerList extends Vue {
  //...
}

Vue 3

对于 Vue 3，vue-class-component@8.x 导出一个您将分配给局部变量的 setup() API：

<template>
  <div>counter: {{myContext.counter}}</div>
  <button @click="myContext.increment">Increment</button>
</template>

<script lang="ts">
import { Vue, setup } from 'vue-class-component'
import { ref } from 'vue'

export default class MyComponent extends Vue {
  myContext = setup(() => {
    const counter = ref(0)

    return {
      counter,
      increment() {
        counter.value++
      }
    }
  })
}
</script>

注意：截至vue-class-component@8.0.0-rc.1，setup() 不接收任何参数，包括context and props arguments from the setup() used in the Options API。

【讨论】：