Как избежать switch при реализации компонента работающего с разными API/сущностями в VueJS?

Question

[Виктор]

Есть компонент, который представляет из себя форму для загрузки сканов. Скан прикрепляется документу, причем документы бывают разного типа и для них разные API/endpoint-ы. Соответственно, визуально компонент выглядит одинаково, но грузить сканы должен по разным урлам.

Одно из решений: передавать в компонент type, и в самом компоненте писать что-то вроде:

switch (this.type) {
    case 'oneDoc': 
        oneDocApi.uploadScan(...); return
    case 'anotherDoc':
        anotherDocApi.uploadScan(...); return
}

Есть ли более удачное решение? Просто не нравится использование свитча

Answer 1

[0xD34F]

// где-то вне метода загрузки сканов
const docApi = {
  oneDoc: oneDocApi,
  anotherDoc: anotherDocApi,
  ...
};

docApi[this.type].uploadScan();

Можно даже в виде вычисляемого свойства оформить:

computed: {
  docApi() {
    return docApi[this.type];
  },
},

this.docApi.uploadScan();