Vue компонент не реагирует на изменения данных плагина - PullRequest
Новая
       15

Vue компонент не реагирует на изменения данных плагина

2 голосов
/ 19 марта 2020

Я пытаюсь заставить компонент реагировать на изменения данных в плагине Vue. Для этого при создании экземпляра плагина он создает объект Vue в своем конструкторе следующим образом: 

this._vm = new Vue({
  data: {
    obj: null,
    status: false,
  },
  watch: {
    obj(val) {
      console.log('From inside the plugin, "obj" changed:', val);
    }
  }
})

При загрузке страницы приложение проверяет, содержит ли localStorage данные для obj имущество. В этом случае после создания экземпляра Vue, как показано выше, объекту присваивается свойство, подобное следующему: this._vm.obj = {x: 1, y:2, z:3}. Это хорошо работает, я вижу следующее в моей консоли: 

15:55:37.346 Component mounted, "obj": Object { … }
15:55:37.350 From inside the plugin, "obj" changed: Object { … }

Я даже могу программно сбросить this._vm.obj на null, после чего консоль отображает реактивность, как и ожидалось: 

16:11:48.722 From inside the plugin, "obj" changed: null
16:11:48.726 Component watch "status": false
16:11:48.727 Component watch "obj": null

Однако, если в localStorage данные не найдены, серверу отправляется запрос, и данные ответа используются для обновления this._vm.obj. Используемый для этого метод такой же, как и выше (который делает this._vm.obj = {x: 1, y:2, z:3}). Наблюдатель в плагине реагирует (From inside the plugin, "obj" changed), но не на компонент ...

Если у кого-то есть указатель, это было бы здорово!

Некоторые фрагменты :
Наблюдатели в компоненте: 

watch: {
  '$MyPlugin.status'(val) {
    console.log('Component watch "status":', val)
  },
  '$MyPlugin.obj'(val) {
    console.log('Component watch "obj":', val)
  }
},

Класс плагина имеет геттеры для доступа к данным: 

get status() {
  return this._vm.status || false
}

get obj() {
  return this._vm.obj
}
...