typescript - 如何通过 typescript 在Vue2中使用带有组合api的vue类组件

Question

<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 中，我想将 Composition API 与 TypeScript 的类组件样式一起使用，但我不确定我的语法是否正确。另外， setup()函数没有被自动调用。
可以 vue-class-component在 TypeScript 中使用 Compostion API？

Answer 1

View 2
首先，确保您已安装 @vue/composition-api Vue 2 插件:

// 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 {
  //...
}

View 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 .