Блог

Я разрабатываю с Vue.js 3.0 и TypeScript.
Я хочу определить перечисление, которое будет использоваться в нескольких компонентах.
Как и где я должен записывать в файл?

Каталог

 src/
├ components/
│ ├ ParentComponent.vue
│ └ ChildComponent.vue
└ App.vue
 

Дочерний компонент.vue

 <template>
  <p>{{ color }}</p>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

enum Color {
  red = 1,
  blue
}

export default defineComponent({
  props: {
    color: { type: Color, required: true }
  }
})
</script>
 

ParentComponent.vue

 <template>
  <div>
    <ChildComponent
      :color="state.color"
    />
  </div>
</template>

<script lang="ts">
import ChildComponent from './ChildComponent.vue'
import { defineComponent, reactive } from 'vue'

// duplicate
enum Color {
  red = 1,
  blue
}

interface State {
  color: Color
}

export default defineComponent({
  components: {
    ChildComponent
  },
  setup () {
    const state = reactive<State>({
      color: Color.red
    }）
    return { state }
  }
})
</script>
 

Вы можете определить и экспортировать перечисление в отдельный файл и импортировать его в разные файлы, чтобы использовать его. Куда вы помещаете этот файл, зависит в основном от вас, от того, как вы хотите структурировать свой проект.

Например, types.ts файл в src папке может определять и экспортировать перечисление, как:

 export enum Color {
    red = 1,
    blue = 2
}
 

И вы можете использовать перечисление в любом месте, импортировав его следующим образом:

 import { Color } from '@/types';
 

Предполагается, что вы src присвоили папке псевдоним @ в своей конфигурации TypeScript, доступной в tsconfig.json файле.