2个组件几乎相同。唯一的区别是每个组件都有不同的 GET 请求。合并他们？

Question

我目前有两个几乎完全相同的组件。 HTML 结构和 CSS 规则是相同的，唯一的区别是在这些组件的 mounted() 上，发出了不同的 GET 请求。一个获得所有访问过的地方，一个获得所有愿望清单的地方。对两个 GET 请求的响应具有相同的结构，只是 returns 不同的地方基于用户访问过的内容或愿望清单。

所以我的问题是，我是要将这 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 挂钩中执行这两个请求，并将它们作为 prop 传递给显示组件：

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

Answer 2

是的，你应该做一个可重用的组件，可能叫做 Places.vue。但是，您返回的结果应该具有相同的结构（您必须将 wishlistPlaces 和 visitedPlaces 重命名为 places，可能。或 sights）：

您的组件应采用源参数，如下所示：

<places source="getWishlist" />

并将其映射为：

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

而你的 getter 应该是这样的：

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

您显然需要重构所有现在使用 wishlist 或 visited props/methods 的地方以使用 places（或 sights，如果这是您的选择）。

Answer 3

看看 Dynamic <components> 它适用于您有选项卡的情况，因此它们都在创建（或装载）时加载，然后您根据需要提供道具。看这里：https://vuejs.org/v2/guide/components-dynamic-async.html

2个组件几乎相同。唯一的区别是每个组件都有不同的 GET 请求。合并他们？

2 components almost identical to each other. The only difference is that each component has a different GET request. Merge them?

javascript

vue.js

vue-component

vuejs2