Как посмотреть изменения объекта? this. $ set, кажется, захватывает только обновление свойства - PullRequest
Новая
       15

Как посмотреть изменения объекта? this. $ set, кажется, захватывает только обновление свойства

0 голосов
/ 26 апреля 2020

У меня есть этот объект массивов, который я пытаюсь наблюдать за каждым обновлением. 

myData = {
    "299":[527],
    "376":[630,629]
}

Я прочитал эту документацию о наблюдении за объектом, который указывал использовать либо this.$set(object, propertyName, value) или Object.assign({}, this.object, dataToBeAppended) чтобы посмотреть объект. Я использовал this.$set. 

export default {
  ...
  data() {
    return {
      myData: {},
    };
  },
  watch: {
    myData(newVal) {
      console.log(`?localStorage`);
    },
  },
  methods: {
    onFoldChange(propertyName) {
      const newArr = [...]
      this.$set(this.myData, propertyName, newArr);
    },
  }
}

В отличие от того, что я ожидал, vue фиксирует изменения только для свойства. Изменения стоимости существующего свойства не отслеживаются. Например, если свойство "299" было недавно добавлено, оно напечатает ?localStorage. Когда значение свойства "299" обновляется с [527] до чего-то другого, ничего не запускается. Когда я печатаю myData, я вижу, что каждое значение обновляется правильно. Просто часы не фиксируют изменения.

В документации также описывается, что мы можем наблюдать массив, используя this.$set(this.myData, indexOfItem, newValue), поэтому я также попробовал версию массива приведенного выше кода, как этот. 

this.$set(this.myData[propertyName], index, newValueToAdd);

На этот раз он вообще не слушает. Даже не первая запись.

Есть ли лучший способ решить эту проблему? Как другие наблюдают за объектом? Сложность исходит от типа значений (массив)?

1 Ответ

1 голос
/ 26 апреля 2020

В настоящее время myData наблюдатель наблюдает только за объектом. Объект содержит указатели на массивы, как в JS Объекты и массивы передаются по ссылке, а не по копии. Вот почему он может обнаружить только изменения в ключах и с простыми значениями. Если вы хотите наблюдать его глубже - я имею в виду и те подмассивы (или подобъекты) - просто используйте глубокое наблюдение. 

watch: {
  myData: {
    deep: true,
    handler (newVal) {
      console.log(`?localStorage`);
    }
  }
}

Другим возможным решением может быть использование некоторой операции Array.prototype для изменения массива, если он уже существует. Например: 

methods: {
    onFoldChange(propertyName) {
      if (propertyName in this.myData && Array.isArray(this.myData[propertyName])) {
           this.myData[properyName].push(162) // Some random value
      } else {
           const newArr = [...]
           this.$set(this.myData, propertyName, newArr);
      }
    },
  }
...