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

Posted 2023-02-16

【中文标题】如何通过打字稿在Vue2中使用带有组合api的vue类组件

【英文标题】：How to use vue class component with composition api in Vue2 by typescript

【发布时间】：2021-03-07 00:48:15

【问题描述】：

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

【问题讨论】：

组合 API 是 Vue 3

@Daniel_Knights Vue 2 还通过插件支持 Composition API：@vue/composition-api

【参考方案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，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。