Объявление переменной в разделе «data» как псевдоним $ root не является реактивным

Question

Я объявляю переменную в main.js :

data: {
  globalData: {}
}

Я хочу избегать использования this.$root.globalData все время - поэтому я использую локальную переменную в компоненте в качестве псевдонима для «глобальной переменной»:

data() {
  return {
    localAlias: this.$root.globalData,
  }
}

Затем я получаю глобальную переменную с сервера в main.js (смоделирован setTimeout):

create() {
  window.setTimeout(() => {
    this.globalData = {a:1, b:2};
  }, 1500);
}

А localAlias остается равным начальному значению.

Как заставить это работать? Мне пока не нужен Vuex, я просто беру данные с сервера и использую их только для чтения.

* * Пример тысячи двадцать-одина * +1022 *

Answer 1

Причина, по которой localAlias ​​не изменяется, заключается в том, что он все еще указывает на тот же объект, в то время как вы повторно указываете это. $ Root.globalData на новый объект. Один из способов сделать это, конечно, использовать computed, как и другой предложенный ответ. Другой способ решить это - просто изменить свойства, а не привязывать весь объект заново:

create() {
  window.setTimeout(() => {
    this.globalData.a = 1;
    this.globalData.b = 2;
  }, 1500);
}

Это менее универсально и будет масштабироваться хуже, если объект станет больше.

Answer 2

Вместо использования data вы можете использовать computed. Это решит вашу проблему.

computed: {
    localAlias: function() {
      return this.$root.globalData;
    }
  }

Я обновил пример