从观察变量中获取数据答案

【问题标题】：Getting data from a watched variable从观察变量中获取数据
【发布时间】：2019-06-24 20:55:58
【问题描述】：

我有一个初学者问题。可能是我太傻了。

情况：我有一个界面，我可以通过滑块设置闹钟计时器值。每次更新值时，都会将其写入文件。但是当我设置一个间隔时，我无法从回调函数访问被监视的变量，请参阅 timeCallback()。

Vue.component('alarm-comp', {
  data: function() {
    return {
      data: {
        wakeup: {
          text: "Get up",
          time: 30, //timeout
        },
        ...
      },
      test: "test",
      ...
    },
  watch: {
    data: {
      handler(val) {
        this.saveSettings(); 
      },
      deep: true
    }
  },
  mounted: function() {
    this.readSettings();
    setInterval(() => {this.timerCallback()}, (this.data.wakeup.time) * 1000); // -> time correctly set
  },
  methods: {
    timerCallback() {
      console.log(this.test); // -> test
      console.log(this.data.wakeup.time); // -> undefined
    },
  }

【问题讨论】：

使用 this.wakeup，而不是 this.data.wakeup
@politinsa wakeup 嵌套在 this.data...
什么是未定义的？数据？醒来？还是时间？
在调用timerCallback 之前是否还有其他代码可以修改data？也许在readSettings？
可能是一个不相关的错字，但据我统计，您的数据声明中缺少右括号

标签： javascript vue.js

【解决方案1】：

嗨，mago，欢迎来到 SO。

在 VueJS 中，信息通过 props 向下发送到组件，并通过 emit 事件向上发送到父组件。如果您希望父组件知道间隔何时结束，您应该向上发出该事件。

看看这个例子：https://codepen.io/bergur/pen/jjwZxO?editors=1010

在我的警报组件中主要是

mounted() {
    setInterval(() => {
        this.$emit('finished', this.wakeup.text)
        }, (this.wakeup.time) * 1000
      );
  },

在这里我创建了发送唤醒文本的完成事件（请注意，我删除了额外的数据包装器）

在我的父对象中我监听那个事件

<Alarm @finished="logMessage" />

logMessage 所做的只是：

methods: {
    logMessage(msg) {
      console.log('the alarm has finished and sent this message: ', msg)
    }
  },

请注意，setInterval 会多次发出事件。

【讨论】：

谢谢。但这不是问题。我想将 IPC 消息推送到我的电子框架以打开一个新窗口 - 这很有效。但是内容（数据）没有被传输 - 因为（数据）在 timerCallback() 中声明为未定义
我认为该解决方案可行，也许我误解了你。当 setInterval 回调完成时，它会触发一个事件。您可以通过事件发送任何您想要的数据。在您的电子框架中收听该事件时，您可以在那里做任何您想做的事情，比如打开一个窗口。
问题是在 setInterval 回调的范围内，我的数据对象被声明为“未定义”，我不明白为什么。因此，即使发出带有未定义数据的信号，也会导致一个带有未定义数据的窗口，而不是我想要的消息。

【解决方案2】：

我从昨天开始就想弄清楚，由于某种原因，你的代码没有执行挂载的钩子，我只是复制了你的代码（在观看之前缺少一个右括号，可能只是为了示例代码）并意识到如果你改变mounted for other hook like created，这我会触发并且我会工作，至少在我的例子中。

created() { this.readSettings(); setInterval(() => {this.timerCallback()}, (this.data.wakeup.time) * 1000); }

你真的需要挂载的钩子，还是可以改成created的？

【讨论】：