Question

如何在 Vue2 中通过 typescript 使用带有 Composition API 的 Vue 类组件

2020-11-24

10442

typescript vue.js vuejs2 vue-composition-api

<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

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

Answer 2

使用 class 编写 setup，支持 vue2 和 vue3

<template>
    <p>{{ count.text }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    public get text() {
        return String(this.value);
    }
    @Hook('mounted')
    public init() {
        this.value++;
    }
}

export default defineComponent({
    setup() {
        return {
            count: new Count()
        }
    }
})
</script>

https://github.com/fmfe/vue-class-setup

Answer 3

import ClassComponent from 'vue-class-component'
ClassComponent.registerHooks(['setup'])

将其放在项目的开始处，然后一切都会按预期进行