Как использовать компонент класса vue с api композиции в Vue2 с помощью машинописного текста

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


typescript vue.js vuejs2 vue-composition-api
person robertzml    schedule 24.11.2020    source источник
comment
Composition API - это Vue 3   -  person Daniel_Knights    schedule 24.11.2020
comment
@Daniel_Knights Vue 2 также поддерживает Composition API через плагин: @vue/composition-api   -  person tony19    schedule 24.11.2020

Ответы (1)


arrow_upward
11
arrow_downward

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 [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() не получает аргументов, включая _ 11_ и props аргументы из setup(), используемых в Options API.

person tony19    schedule 26.11.2020