devilsD
@devilsD

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

В плагине обьявляю свойство прототипа:
Vue.prototype.$dataGroups = [];
Но как оказалось оно не реактивное.
Установить свойство с помощью Vue.set тоже не дало результата:
Vue.set(Vue.prototype, '$dataGroups', ["navigation"]);
  • Вопрос задан
  • 769 просмотров
Пригласить эксперта
Ответы на вопрос 2
bingo347
@bingo347
Бородатый программер
Хм, на ум приходит нечто такое:
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);
  }
});
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
Если хочется что-то простое, то можно использовать простой контейнер состояния а для модели компонентов - акторов использовать event bus
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
05 дек. 2020, в 08:07
15000 руб./за проект
05 дек. 2020, в 03:51
11000 руб./за проект
05 дек. 2020, в 02:29
1000 руб./за проект