Vuejs多次显示带有Axios的组件

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

将代码包装在您想要在组件中重用此值 3x 的位置。

<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>