javascript - 如何查看Vue组件中的多个属性？

Question

当其他几个属性之一更新时，我正在尝试更新 Vue 组件属性 station。它不能用作计算属性，因为计算属性是同步的，并且这需要 API 请求。

基于 issue reply in Vue core我在 vm.$watch 上找到了文档。这看起来就是我所需要的，但我无法弄清楚它应该如何在此组件上下文的上下文中实现。

我认为我应该在文档中使用 this 代替 vm，但我对此不确定。再说一遍，在箭头函数的左侧(即 $watch 的第一个参数)使用 this 会引发错误，例如 箭头函数参数中的左侧无效.

我对 vm.$watch 的使用是在以下组件代码的末尾。我不断收到的错误是:观看路径失败:“[object Object]”观察器仅接受简单的点分隔路径。为了完全控制，请使用函数。(我以为我是......)

<template lang="html">
  <div>
    {{ station }}
  </div>
</template>

<script>
import ApiService from '@/services/ApiService';

export default {
  name: 'Chart',
  props: {
    mode: String,
    toDate: String,
    toTime: String
  },
  data() {
    return {
      stationId: 3069,
      station: {}
    };
  },
  watch: {
    station: function() {
      // Render function
    }
  },
  methods: {
    getInfo: async function(opts) {
      const stationData = await ApiService[this.mode]({
        id: opts.id,
        toTime: `${opts.toDate}T${opts.toTime}`,
        fromTime: `${opts.fromDate}T${opts.fromTime}`
      })
        .then(res => {
          return res.data.station.properties;
        })
        .catch(err => {
          console.error(err);
          return {};
        });

      return stationData;
    }
  },
  created: function() {
    // MY WATCHING STARTS HERE  
    this.$watch(
      () => return {
        mode: this.mode,
        stationId: this.stationId,
        toDate: this.toDate,
        toTime: this.toTime
      },
      async function(data) {
        this.station = await this.getInfo({
          mode: data.mode,
          id: data.stationId,
          toDate: data.toDate,
          toTime: data.toTime
        }).then(res => {
          return res;
        });
      }
    );
  }
};
</script>

Answer 1

您的观察者正在箭头函数中返回。应该是这样的:

this.$watch(
  () => {
     return {
       mode: this.mode,
       stationId: this.stationId,
       toDate: this.toDate,
       toTime: this.toTime
     }
  },

此代码无效使用:

() => return { 

如果不使用大括号，箭头函数会隐式返回值。因此，您也可以使用:

this.$watch(
  () => ({
     mode: this.mode,
     stationId: this.stationId,
     toDate: this.toDate,
     toTime: this.toTime
  }),

注意，括号用于返回对象。您可能还喜欢阅读this post进一步。