Vuejs Отображение компонента несколько раз с Axios в нем - PullRequest
Новая
       13

Vuejs Отображение компонента несколько раз с Axios в нем

0 голосов
/ 27 июня 2018

Я пытался понять это часами, но не повезло. У меня есть 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>

1 Ответ

0 голосов
/ 27 июня 2018

Оберните код, в котором вы хотите использовать это значение 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>
...