Console.log вызывается дважды в Vue js наблюдателе - PullRequest
Новая
       3

Console.log вызывается дважды в Vue js наблюдателе

1 голос
/ 09 февраля 2020

Я пытаюсь создать таймер для викторины. Таймер получается из выхода API, который находится в секундах. Я использую Vuex для хранения результатов API. И использование получателей для получения сохраненного таймера в компоненте Timer. Как только я получаю значение таймера в секундах, я конвертирую его в hrs, min и se c внутри вычисляемого свойства, а затем пытаюсь уменьшить таймер на 1 секунду. Каким-то образом мне удалось уменьшить таймер с помощью свойства watcher, но проблема в том, что таймер не уменьшается на -1, он уменьшается на -2. Когда я запустил console.log внутри наблюдателя, я заметил, что console.log вызывается дважды. Один раз с неопределенным значением таймера и один раз с фактическим значением таймера. Я не знаю, правильно ли я это делаю или нет, так как я новичок ie в Vuejs. Пожалуйста, помогите мне решить эту проблему, а также исправьте меня, если я ошибаюсь. Я приложу код, который я пытался написать до сих пор.

Спасибо. 

const Timer = Vue.component('Timer', {
  template: `
    <div class="navbar-nav ml-auto" v-if="time_left">
     {{hour}} : {{min}} : {{sec}}
    </div>
  `,
  computed: {
    ...Vuex.mapGetters([
        'time_left'
      ]),
    hour(){
      let h = Math.floor(this.time_left / 3600)
      return h > 9 ? h : '0' + h;
    },
    min(){
      let m = Math.floor(this.time_left % 3600 / 60);
      return m > 9 ? m :'0' + m
    },
    sec(){
      let s = Math.floor(this.time_left % 3600 % 60);
      return s > 9 ? s : '0' + s
    }
  },
  watch: {
    time_left: {
      immediate: true,
      handler (newVal) {
        const timer = this.time_left
        setInterval(() => {
          // this.$store.commit('UPDATE_QUIZ_TIMER', this.time_left)
          console.log(this.time_left)
        }, 1000)
      }
    }
  }
})

1 Ответ

1 голос
/ 09 февраля 2020

Вы не делаете ничего плохого. Наблюдатель запускается один раз, когда свойство сначала определяется со значением undefined, а затем дважды, когда ему присваивается значение. Попробуйте: 

 watch: {
    time_left: {
      immediate: true,
      handler (newVal) {
        if(newVal !== undefined){
          const timer = this.time_left
          setInterval(() => {
            // this.$store.commit('UPDATE_QUIZ_TIMER', this.time_left)
            console.log(this.time_left)
          }, 1000)
        }
      }
    }
  }
...