如何通过打字稿在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

视图 2

首先，确保你已经安装了@vue/composition-apiVue 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 {
  //...
}

视图 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()接收任何参数，包括来自Options API 中使用的context和props参数setup()。