时间戳

首页 > 解决方案 > Vue.js 2：观察但不关注初始数据获取

javascript - Vue.js 2：观察但不关注初始数据获取

问题描述

我是 Vueniverse 的新手（使用 Vue.js 2），我在watch. 在 上mounted，我调用一个 API 并将单选按钮设置为我从 API 获得的值，所以基本上我有两个单选按钮的值1和0（真/假）。

我认为观察者工作正常，因为它会在值改变时触发。但是，我不希望它在初始更改时触发 - 那是我第一次从后端设置值的时候。

我尝试过使用不同的生命周期钩子，例如beforeCreated，created等等，它总是会触发。

可能这很容易做到，但我不知道如何在互联网上找到信息（可能使用错误的关键字）。

编码：

import axios from "axios";

export default {
  name: 'Settings',

  data: () => ({
    /* set motionSensor to null initially */
    motionSensor: null
  }),
  mounted() {
    /* get the initial value from the backend, however this triggers the watcher */
    axios
      .get('http://localhost:8000/status.json')
      .then(response => {
        response.data['motionsensor'] ? this.motionSensor = "1" : this.motionSensor = "0";
      })
  },
  watch: {
    motionSensor: function(val) {
      alert('Motion sensor value is now: ' + val)
    }
  }
}

标签： javascriptvue.jsvuejs2vuejs3

解决方案

尝试利用作为 watch handler 的第二个参数的旧值：

watch: {
  motionSensor: function(val, oldVal) {
    if (oldVal !== null) {
      alert('Motion sensor value is now: ' + val)
    }
  }
}

推荐阅读