Блог

 <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 ли работать с Composition API в TypeScript?

Vue 2

Сначала убедитесь, что вы установили @vue/composition-api плагин для 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() не получает никаких аргументов, включая аргументы context и props из setup() используемого в API опций.

Используйте class для записи настроек и поддержки 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