2 компонента практически идентичны друг другу. Разница лишь в том, что у каждого компонента свой запрос GET. Слить их?

Question

В настоящее время у меня есть 2 компонента, которые практически идентичны друг другу. Структура HTML и правила CSS одинаковы, и единственное отличие состоит в том, что на mounted() этих компонентов выполняется другой запрос GET. Каждый получает все посещенные места, и каждый получает все желаемые места. Ответ на оба запроса GET имеет одинаковую структуру, он просто возвращает разные места в зависимости от того, что пользователь посетил или внес в список желаний.

Итак, мой вопрос: я должен объединить эти 2 компонента в 1? Если бы мне пришлось это сделать, как бы я определил, нужно ли мне отправлять запрос GET на посещенные места или в списки желаемых мест? Может быть, на основании URL? Если URL-адрес http://localhost:8080/#/Admin/visited, выполнить запрос GET, который получает все посещенные места, и, если он http://localhost:8080/#/Admin/wishlist, получить список желаемых мест?

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

Wishlist.vue

<template>
    <div class='wishlisted-sights-list'>
        <div @click='selectSight(index)' class='wishlisted-sight' v-if='wishlist != null' v-for='(wishlistedPlace, index) in wishlist'>
            <img class='wishlisted-sight-photos' :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + wishlistedPlace.result.photos[0].photo_reference + '&key='">
            <div class="">
                <p class='wishlisted-sights-name'>{{ wishlistedPlace.result.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data(){
            return {
                wishlist: null,
                username: this.$route.params.username,
            }
        },
        methods: {
            selectSight(index) {
                const placeId = this.wishlist[index].result.place_id;
                this.$router.push('/' + this.username + '/' + placeId)
            }
        },
        mounted() {
            axios.get('/getWishlist/' + this.username)
            .then(response => {
                this.wishlist = response.data.wishlistedPlaces
            }).catch((error) => console.log(error));
        }
    }
</script>

Visited.vue

<template>
    <div class='visited-sights-list'>
        <div @click='selectSight(index)' class='visited-sight' v-if='visited != null' v-for='(visitedPlace, index) in visited'>
            <img class='visited-sight-photos' :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + visitedPlace.result.photos[0].photo_reference + '&key='">
            <div class="">
                <p class='visited-sights-name'>{{ visitedPlace.result.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data(){
            return {
                visited: null,
                username: this.$route.params.username,
            }
        },
        methods: {
            selectSight(index) {
                const placeId = this.visited[index].result.place_id;
                this.$router.push('/' + this.username + '/' + placeId)
            }
        },
        mounted() {
            axios.get('/getVisited/' + this.username)
            .then(response => {
                this.visited = response.data.visitedPlaces
            }).catch((error) => console.log(error));
        }
    }
</script>

Answer 1

Отдельное получение данных от отображения данных.Затем родительский объект может выполнить оба запроса в своем mounted/created хуке и передать их в качестве реквизита компоненту дисплея:

<places :places="visited"/>
<places :places="whishlist"/>

Answer 2

Да, вы должны создать компонент многократного использования, который, вероятно, называется Places.vue. Однако возвращаемый результат должен иметь такую ​​же структуру (возможно, вы должны переименовать wishlistPlaces и visitedPlaces в places. Или sights):

Ваш компонент должен принимать в параметре source следующие строки:

<places source="getWishlist" />

И отобразите это как:

props: {
  source: {
     type: String,
     required: true
  }
}

в то время как ваш геттер должен что-то вроде:

mounted() {
    axios.get(`/${this.source}/${this.userName}`)
    .then(response => {
        this.places = response.data.places
    }).catch((error) => console.log(error));
}

Вам, очевидно, нужно провести рефакторинг всех мест, где вы сейчас используете wishlist или visited реквизиты / методы для использования places (или sights, если это ваш выбор).

Answer 3

Взгляните на Dynamic <components>, это хорошо для случаев, когда у вас есть вкладки, так что они оба загружаются при создании (или монтировании), а затем вы предоставляете реквизиты в соответствии с потребностями.Смотрите здесь: https://vuejs.org/v2/guide/components-dynamic-async.html