Совместное использование переменной во всех vue экземплярах компонентов - PullRequest
Новая
       16

Совместное использование переменной во всех vue экземплярах компонентов

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

Я пытаюсь провести рефакторинг некоторого кода и переместить некоторый код в миксин. Но у меня другое поведение. Я хотел, чтобы объект был общим для всех экземпляров компонента. Поэтому я написал что-то вроде ниже 

<script>
export default {
  registryManager: new RegistryManager()
}
</script>

В тех случаях, когда я обращался к этому по this.$options.registeryManager. Теперь я переместил этот код в миксины.

Миксины 

export default {
  registryManager: new RegistryManager()
}

Компонент 

<script>
import registryManager from './mixins/registryManager';
export default {
  mixins: [registryManager]
}
</script>

Допустим, у вас есть 2 компонента A, B. Ранее все у экземпляров компонента A был один RegistryManager, а у всех экземпляров компонента B - отдельный RegistryManger. С использованием mixin все экземпляры компонента A и компонента B совместно используют один диспетчер реестра, потому что независимо от того, сколько компонентов использует mixin, создается только один экземпляр mixin. Есть ли способ создать один экземпляр mixin? на компонент, чтобы получить более раннее поведение?

Ответы [ 2 ]

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

Вы можете создать фабричный метод внутри mixin, который ожидает идентификатор (например, имя компонента) и возвращает экземпляр RegisterManager.

Модуль mixin должен будет сохранить карту от идентификаторы экземпляров RegisterManager.

Что-то похожее на это. 

const instances = {
}

export default {
  getRegistryManager: (id) => {
    if (!instances[id]) {
      instances[id] = new RegistryManager()
    }

    return instances[id]
  }
}

А затем вызовите getRegistryManager из ваших компонентов. 

<script>
  import getRegistryManager from './mixins/registryManager';
  export default {
   mixins: [getRegistryManager("ComponentName")]
  }
</script>
1 голос
/ 05 апреля 2020

Это ожидаемое поведение. Существует только один экземпляр класса, new RegistryManager() оценивается только один раз в модуле mixin, Vue не знает, что registryManager нужно создавать несколько раз.

Поскольку существует отношение один к одному между конструктором компонента и экземпляром класса его можно назначить как свойство конструктора.

Это может быть сделано глобально: 

Object.defineProperty(Vue.prototype, 'registryManager', {
  get() {
    if (!this.constructor._registryManager) {
      this.constructor._registryManager = new RegistryManager();
    }

    return this.constructor._registryManager;
  }
});

Класс также лениво создается таким образом. Может быть помещен внутрь install(Vue) {...} и использован как плагин.

Или локально как миксин: 

  beforeCreate() {
    if (!this.constructor._registryManager) {
      this.constructor._registryManager = new RegistryManager();
    }

    this.registryManager = this.constructor._registryManager;
  }
...