Как свойство экземпляра в VUE сделать реактивным?

Question

[devilsD]

В плагине обьявляю свойство прототипа:
Vue.prototype.$dataGroups = [];
Но как оказалось оно не реактивное.
Установить свойство с помощью Vue.set тоже не дало результата:

Vue.set(Vue.prototype, '$dataGroups', ["navigation"]);

Answer 1

[Дмитрий Беляев]

Хм, на ум приходит нечто такое:

const box = new Vue({data: {groups: []}});
Object.defineProperty(Vue.prototype, '$dataGroups', {
  configurable: true,
  get() { return box.groups; },
  set(value) { box.groups = value; }
});

P.S. у Вас разные свойства $dataGroups и $dataGroupsActive
P.S.S. иметь в прототипе объекты/массивы не очень хорошая практика, лучше сделать подобно тому, как Vuex кидает $store в инстансы, через миксин: https://github.com/vuejs/vuex/blob/dev/src/mixin.js#L22

UPD: пример с миксином:

Vue.mixin({
  beforeCreate() {
    const {$options} = this;
    const {parent} = $options;
    if($options.dataGroups) {
      const groups = typeof $options.dataGroups === 'function' ? $options.dataGroups() : $options.dataGroups;
      const box = new Vue({data: {groups}});
      Object.defineProperty(this, '$dataGroups', {
        configurable: true,
        get() { return box.groups; },
        set(value) { box.groups = value; }
      });
      return;
    }
    if(!parent) { return; }
    const descriptor = Object.getOwnPropertyDescriptor(parent, '$dataGroups');
    if(!descriptor) { return; }
    Object.defineProperty(this, '$dataGroups', descriptor);
  }
});

Comments

[devilsD]

P.S. у Вас разные свойства $dataGroups и $dataGroupsActive

Исправил.

лучше сделать подобно тому, как Vuex кидает $store в инстансы

Спасибо за наводку. Мне нужно глобальное реактивное свойство, и хотелось бы не использовать vuex а максимально изолировать компонент.

[Дмитрий Беляев]

devilsD, добавил пример с миксином в ответ, Вам остается только добавить нужное свойство dataGroups в конфиг корневого компонента

[devilsD]

Т.е полностью изолировать компонент не получиться, в качестве источника истины нужно задавать свойство корневому компоненту?

[Дмитрий Беляев]

devilsD, приведенный пример иллюстрирует наследование свойства компонентов через миксины, что-то должно быть первоисточником

Answer 2

[Антон Антон]

Если хочется что-то простое, то можно использовать простой контейнер состояния а для модели компонентов - акторов использовать event bus