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

Question

[andrei_pro]

Всем привет.

Такая структура:

Container.js

export default class Container {
 constructor(container) {
    this.container = container
    this.scale = 1
 }

 setScale(scale) {
    this.scale = scale
 }

  cumulative() {
     return Math.PI
  }

  getCumulativeScale() {
      return this.cumulative() * this.scale
  }
}

-Wrapper.vue
--Container.vue
---Scale.vue
----ScaleWrapper.vue
---Element.vue

Container.vue

<template>
  <div>
   Container
  </div>
</template>

<script>
 import Container from './Container'

 export default {
   mounted() {
      const container = new Container(this.$el)
     
     this.$el.addEventListener('mousedown', (e) => {
         let scale = 1//

         container.setScale(scale)
     })
  },
  methods: {}
 }
</script>

В переменной container экземпляр класса Container.
Далее мне нужно этот container использовать во всех компонентах (к примеру брать getCumulativeScale()) , как его пробросить (без миксинов и статических методов)?

Comments

[Лев Забудкин]

export const container = new Container(this.$el)

Answer 1

[Alex]

Возможно вам подойдёт плагин: https://ru.vuejs.org/v2/guide/plugins.html
Или вот: https://ru.vuejs.org/v2/api/#provide-inject

Comments

[andrei_pro]

Благодарю. Вроде должно работать

Vue.prototype.$container = new Container()

только нет реактивности. Походу только экземпляр vue можно

Answer 2

[Лев Забудкин]

export const container = new Container(this.$el)

Answer 3

[OniVe]

Для использования общих/наследуемых компонентов, необходимо использовать примеси (mixins).

- Использование примесей (mixins)
- С помощью декораторов