What is the best practice for general functionality in Vue?

Question

Vue.js

Good day.
Let's say we have some common functionality, a parent component, that should be applied to other components. For example, a range of stand-alone components that internally take data from a particular provider.
To do this, I see several options:
- composition (preferably, but in the JS world you can’t do it without crutches, so I would pass abstraction to the constructor)
- hoc (also very good)
- inheritance (not very good, reduces flexibility and in general)
- mixins (an analogue of traits in php, in my opinion, is not the best practice and, in theory, mixins should be thrown with tomatoes for the fact that you can define Lifecycle hooks and data type options there, there is so much room for Indians)
Actually, the question is, what is the best way to do this in Vue? In react now I would use hooks.
Thanks in advance.

Answer 1

The third view will have composition using the new composition API . They are said to be similar to React Hooks.
For now, you can use https://github.com/vuejs/composition-api - a port of the same (or +- the same) API for the second version. It is important to understand that this is NOT a full port, but only a compat layer for easy transition to the third version.

Answer 2

Regarding data providers: it is better to display them separately in services, and pass them to the properties of the components. Simplified similarity to DI/RoC. Before creating the vue app, we create all the services and pass the object, with fields equal to the names of the services and values ​​equal to the service objects themselves, to the App property.