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