如何通过打字稿在 Vue2 中使用具有组合 api 的 vue class 组件

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 中，我想通过 TypeScript 使用 Composition API 和 class 组件样式，但我不确定我的语法是否正确。此外，setup() 函数没有被自动调用。

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

Answer 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 选项（而不是 class 方法）：

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

如何通过打字稿在 Vue2 中使用具有组合 api 的 vue class 组件

How to use vue class component with composition api in Vue2 by typescript

typescript

vue.js

vuejs2

vue-composition-api

Vue 2

Vue 3