Как автоматически обновить вычисляемое свойство в axios в vuejs - PullRequest
Новая
       29

Как автоматически обновить вычисляемое свойство в axios в vuejs

0 голосов
/ 09 февраля 2019

Я вызываю данные restpi с axios в vuejs, я хочу, чтобы эти данные автоматически обновлялись каждую секунду, чтобы увидеть любое изменение чисел.Я вижу данные, они работают, но обновление не работает

Я поместил функцию setinterval в область методов, но она не обновляет данные. 

import axios from 'axios';    
export default {    
  data () {    
    return {    
      btctrk: null,    
      bnnc: null,    
    }    
  },    
  computed: {    
          result1: function(){    
              return  this.btctrk[0].ask / this.btctrk[4].bid;    
          },    
          result2: function(){    
              return  this.btctrk[0].bid / this.btctrk[4].ask;    
          },    
          result3: function(){    
              return  (1-(this.bnnc[11].bidPrice / this.result1))*100;    
          },    
          result4: function(){    
              return (1-(this.result2 / this.bnnc[11].askPrice))*100;    
          },    
      },    
  mounted () {    
    axios    
      .get('https://www.api1.com/api/ticker')    
      .then(response => (this.btctrk = response.data))    
      .catch(error => console.log(error))    
    axios    
      .get('https://api.api2.com/api/v3/ticker/bookTicker')    
      .then(response => (this.bnnc = response.data))    
      .catch(error => console.log(error))    
  },    
  methods: {    
              startInterval: function () {    
                   setInterval(() => {    
                      this.result1;    
                      this.result2;    
                      this.result3;    
                      this.result4;    
                   }, 1000);    
          }    
  }    
}

1 Ответ

0 голосов
/ 09 февраля 2019

Вычисленные свойства переоцениваются только в том случае, если некоторые из его зависимостей изменились, а это означает, что они имеют своего рода «кеш», если мы можем так выразиться. См .: Компьютерное кэширование по сравнению с методами

Другое дело, что вы запускаете ваш Axios, когда вы монтируете вызов (), то есть ваш вызов выполняется только после монтирования компонента и не обновляется ввсе. См .: Диаграмма жизненного цикла

Мое решение вашей проблемы будет примерно таким: 

  export default {
    data () {    
        return {    
        btctrk: null,    
        bnnc: null,    
        }    
    },    
    computed: {
        result1: function(){    
            return  this.btctrk[0].ask / this.btctrk[4].bid;    
        },    
        result2: function(){    
            return  this.btctrk[0].bid / this.btctrk[4].ask;    
        },    
        result3: function(){    
            return  (1-(this.bnnc[11].bidPrice / this.result1))*100;    
        },    
        result4: function(){    
            return (1-(this.result2 / this.bnnc[11].askPrice))*100;    
        },    
    },
    methods: {
        btcTrkAPICall: function () {
            axios    
                .get('https://www.api1.com/api/ticker')    
                .then(response => (this.btctrk = response.data))    
                .catch(error => console.log(error))    
        },
        bnncAPICall: function () {
            axios    
                .get('https://api.api2.com/api/v3/ticker/bookTicker')    
                .then(response => (this.bnnc = response.data))    
                .catch(error => console.log(error))    
        },
        intervalFetchData: function () {
            setInterval(() => {    
                this.btcTrkAPICall();
                this.bnncAPICall();
                }, 1000);    
        }
    },
    mounted () {
        // Run the functions once when mounted 
        this.btcTrkAPICall();
        this.bnncAPICall();
        // Run the intervalFetchData function once to set the interval time for later refresh
        this.intervalFetchData();
    }
}

Я думаю, что это правдоподобное решение, не стесняйтесь проверить его.

...