Change: Don't use Vue Mixins
Reasons:
Non-obvious code
using a mixin means you have a magic this.something
in a component, and you cannot easily tell what it is. This problem is compounded if there's multiple mixins.
unused props & methods
Most places that use mixins don't use all the props they provide. Mixins become a dumping ground for 'shared code', which results in them being concerned with too many things
circular dependencies
Many of our mixins are dependent on certain properties existing on the component, without making that dependency explicit. e.g security_report_mixin depends on a prop, but doesn't itself include that prop as a dependency. This is potentially fixable by adding the prop to the mixin. But then it's on both the component and the mixin.
What can we do
Use child components! Most mixins are providing computed values or methods, then rendering them in the template.
Compare:
<div>{{ someValueThatIsNotInThisFile }}</div>
<a-tastefully-named-component value="wonderful" />
tldr
- try to use components instead of mixins
- if you want to share some functions, export as functions and use those in your components