Объект mixins, повторяющийся код в Vueв

У вас появилось несколько похожих компонентов с повторяющимся кодом, для того, чтобы не дублировать код у нас есть mixins или примеси, функционал из миксинов может быть использован в нескольких компонентах сразу.

Миксин может содержать любые свойства. Если компонент использует миксин, то все свойства миксина добавляются к свойствам данного компонента.

Допустим у нас есть два компонента которые очень схожи по коду:

components/Worker.vue<script>
export default {
  data() {
    return {
      name: 'Рабочий',
      quantity: 222,
      ratio: 2
    }
  }
}
</script>
<template>
  <h3>{{ name }}</h3>
  <p>{{ quantity * ratio }}</p>
</template>

components/User.vue<script>
export default {
  data() {
    return {
      name: 'Пользователь',
      quantity: 222,
      ratio: 2
    }
  }
}
</script>
<template>
  <h3>{{ name }}</h3>
  <p>{{ quantity * ratio }}</p>
</template>

Дальше эти два компонента вызываются в родительском:

App.vue<script>
import User from './components/User.vue'
import Worker from './components/Worker.vue'
export default {
  data() {
    return {
      h1: 'Рабочии и пользователи'
    }
  },
  components: {
    User,
    Worker
  }
}
</script>
<template>
  <h1>{{ h1 }}</h1>
  <User/>
  <Worker/>
</template>

Компоненты разные, но имеют одинаковую логику. Чтобы вынести ее, потребуется создать в директории src папку mixins с файлом который будем импортировать, в моем случае название для файла mixin.vue:

mixins/mixin.vue<script>
export default {
  data() {
    return {
      quantity: 222,
      ratio: 2
    }
  }
}
</script>
<template>
  <h3>{{ name }}</h3>
  <p>{{ quantity * ratio }}</p>
</template>

Практически вся логика перекочевала в миксин. При использовании примеси внутри компонентов все их опции сливаются.

components/Worker.vue<script>
import mixin from '../mixins/mixin.vue'
export default {
  data() {
    return {
      name: 'Рабочий',
    }
  },
  mixins: [mixin]
}
</script>
<template>
  <h3>{{ name }}</h3>
  <p>{{ quantity * ratio }}</p>
</template>

components/User.vue<script>
import mixin from '../mixins/mixin.vue'
export default {
  data() {
    return {
      name: 'Пользователь',
    }
  },
  mixins: [mixin]
}
</script>
<template>
  <h3>{{ name }}</h3>
  <p>{{ quantity * ratio }}</p>
</template>

App.vue<script>
import User from './components/User.vue'
import Worker from './components/Worker.vue'
export default {
  data() {
    return {
      h1: 'Рабочии и пользователи'
    }
  },
  components: {
    User,
    Worker
  }
}
</script>
<template>
  <h1>{{ h1 }}</h1>
  <User/>
  <Worker/>
</template>