如何通过打字稿在Vue2中将Vue类组件与复合API结合使用

debugcn 发表于 Dev

罗伯茨

<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吗？

东尼19

查看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，[email protected]导出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>

注意：从开始[email protected]，setup()没有任何参数，包括Options API中使用的context和props参数setup()。