Обычная Vue структура для схожих функциональных компонентов (с Vuex)

Question

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

Как сохранить чистоту / ремонтопригодность, когда отличаются только методы получения и действия?
Я использую миксин? Компонент высшего порядка? Варианты использования? И, если возможно, объясните свой выбор

Например, следующие компоненты:

1. совместно используют одни и те же sameFunction1() и sameFunction2()
2. единственная разница в том, что геттеры и действия различны

Компонент 1

export default {
  // ...
  computed: {
    ...mapGetters([
      'getDog1',
      'getCat1',
    ])
  },
  methods: {
    ...mapActions([
      'setDog1',
      'setCat1',
    ])
    sameFunction1() {...},
    sameFunction2() {...},
  },
}

Компонент 2

export default {
  // ...
  computed: {
    ...mapGetters([
      'getDog2',
      'getCat2',
    ])
  },
  methods: {
    ...mapActions([
      'setDog2',
      'setCat2',
    ]),
    sameFunction1() {...},
    sameFunction2() {...},
  },
}

Answer 1

На основе Estus Flask комментарий

Мы можем использовать миксины и структурировать компонент как абстрактные классы

Миксины

// define a mixin object
var myMixin = {
  methods: {
    sameFunction1() {...},
    sameFunction2() {...},
  }
}

Компонент 1

export default {
  mixins: [myMixin],
  // ...
  computed: {
    ...mapGetters([
      'getDog1',
      'getCat1',
    ])
  },
  methods: {
    ...mapActions([
      'setDog1',
      'setCat1',
    ])
  },
}

Компонент 2

export default {
  mixins: [myMixin],
  // ...
  computed: {
    ...mapGetters([
      'getDog2',
      'getCat2',
    ])
  },
  methods: {
    ...mapActions([
      'setDog2',
      'setCat2',
    ]),
    sameFunction1() {...},
    sameFunction2() {...},
  },
}