Question

我已经尝试了一个小时，但是没有运气。我有2个组成部分。第一个组件是动态的，第二个组件只是获取用户的地理位置。然后，地理位置将显示在第一个组件中。

我的问题是，我在页面上几次显示第一个组件，并且每次显示时都会发出GET请求，效率很低。如果我显示该组件3次，它将发出3个GET请求。

重写此内容的最佳方法是什么？

感谢您的帮助

组件1：

<template>
    <section id="under-info">
        THe user is from <ip_info></ip_info>
    </section>
</template>

<script>
    export default {
    }
</script>

组件2：

<template>

    <span id="user-city">
        {{value}}
    </span>


</template>

<script>
    export default {
        mounted: function () {
            this.$nextTick(function () {
                this.getIpInfo(this.param)
            })
        },
        props:['param'],
        data: function () {
            return {
                value:null
            }
        },
        methods:{
            getIpInfo(){
                var vm = this
                delete axios.defaults.headers.common["X-Requested-With"];
                delete axios.defaults.headers.common["X-CSRF-TOKEN"];
                axios
                    .get('http://api.ipstack.com/check?access_key=?',{
                        timeout: 1000
                    })
                    .then(function(response) {
                        vm.value = response.data['city]
                    })
            }
    },
    }
</script>

Answer 1

将代码包装为要在组件中重复使用此值3倍的位置。

<template>
    <div>
        The user is from {{location}}, and {{location}} is a great place.  They have a baseball team in {{location}}
    </div>
</template>

<script>
    export default {
        mounted: function () {
            this.$nextTick(function () {
               if(this.needLocation){
                this.getIpInfo(this.param)
               }
            })
        },
        props:['param', 'needLocation'],
        data: function () {
            return {
                location:null
            }
        },
        methods:{
            getIpInfo(){
              this.location = //results from your API call
        }
    }
</script>

Vuejs使用Axios多次显示组件

1 个答案: