형식 스크립트별로 Vue2의 구성 API와 함께 vue 클래스 구성 요소를 사용하는 방법

형식 스크립트별로 Vue2의 구성 API와 함께 vue 클래스 구성 요소를 사용하는 방법

<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-componentTypeScript에서 Compostion API로 작업할 수 있습니까?

Vue 2

먼저 Vue 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 {
  //...
}

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에서 사용되는및 인수를 포함한 인수를 수신하지 않습니다.

언급URL : https://stackoverflow.com/questions/64983076/how-to-use-vue-class-component-with-composition-api-in-vue2-by-typescript