Как сделать запрос между несколькими API с VueJS?

Question

Мне нужна помощь в подходе к логике для моего одностраничного приложения с VueJS.Мне сложно это объяснить, поэтому я надеюсь, что смогу сделать все возможное:

У меня есть шаблон / компонент с одним запросом API GET через Axios, например:

Компонент назван«Похожие объекты»

<template>
    <div v-if='gde.length > 0'>
        <h4>Similar Entitie(s)</h4>
      <ul>
        <li v-for='item in gde'>
            <a href='#'>{{item['Similar Entities']}}</a>
        </li>
      </ul>
    </div>
</template>

<script>
import axios from 'axios';
import api from '@/api.js';

export default {
  name: 'SimilarEntities',
  data: function() {
    return {
      gde: []
    };
  },
  created: function() {
    axios
      .get(api.getSimilarEntities + this.$route.params.ID)
      .catch(error => {
        console.log(error);
      })
      .then(response => {
        this.gde = response.data;
      });
  }
};
</script>

Приведенный выше шаблон возвращает HTML со списком маркеров, например:

• Здание
• Закаленное авиационное убежище

(и объект gde выглядит следующим образом)

[  
   {  
      "ID":100,
      "Name":"Aircraft Hangar",
      "Similar Entities":"Building"
   },
   {  
      "ID":100,
      "Name":"Aircraft Hangar",
      "Similar Entities":"Hardened Aircraft Shelter"
   }
]

Вышеупомянутый компонент «Похожие объекты» является частью более крупногошаблон (который является частью большего шаблона!), который использует другой запрос Axios.get для заполнения страницы сведений о продукте, например:

Компонент с именем 'Appearance'

<template>
    <div>
        <div>
       <p>INfo about this product</p>
        <ul>
        <li v-for='item in ga'></li>
        </ul>
        <similar-entities></similar-entities>
       </div>

      </div>
</template>

<script>
import axios from 'axios';
import api from '@/api.js';
import SimilarEntities from '@/components/SimilarEntities.vue';

export default {
  name: 'Appearance',
  components: {
    SimilarEntities
  },
  data: function() {
    return {
      ga: []
    };
  },
  created: function() {
    axios
      .get(api.getAppearance + this.$route.params.ID)
      .catch(error => {
        console.log(error);
      })
      .then(response => {
        this.ga = response.data;
      });
  }
};
</script>

Приведенный выше шаблон «Внешний вид» возвращает HTML следующим образом:

Внешний вид

Ангар для самолетов - это место, где хранятся самолеты ....бла-бла-бла

- Здание

- Закаленное авиационное укрытие

В целом, объект $ route.params для одностраничного компонента с информацией о маршрутизаторе выглядит примерно так:

   {  
      "ID":100,
      "Name":"Aircraft Hangar"
   }

Проблема в том, что я не могу понять, как сделать гиперссылку для элементов похожих объектов в разделе ПохожиеКомпоненты сущностей (в данном случае Building и Hardened Aircraft Shelter) для соответствующей страницы сведений о продукте, поскольку они не содержат связанных с ними идентификаторов.

Примечание. Доступна конечная точка, которую я могу использовать, под названием getNames, которая содержит названия продуктов для всех продуктов (включая названия наших продуктов Building и Hardened Aircraft Shelter), которыесодержит следующие данные:

{  
      "ID":100,
      "Name":"Aircraft Hangar"
},
{
      "ID": 101,
      "Name": "Building"
},
{
       "ID": 102,
       "Name": "Carport"
}
...snip

Должен ли я поместить API getNames в какое-то глобальное состояние?Затем с помощью объекта $ route.params я могу получить ключ с именем Name и затем каким-то образом посмотреть на глобальное состояние объекта getNames и динамически связать имя с элементом гиперссылки компонента Similar Entities?Таким образом, ссылки Building и Hardened Aircraft Shelter в компоненте Similar Entities будут связаны?Все, что я пытаюсь сделать, - это заставить пользователя перейти на нужную страницу продукта, когда он нажмет на ссылку Similar Entities (в этой демонстрации это Building или Hardened Aircraft Shelter).

Спасибо за любые советы.Я, наверное, обдумываю это ....