【问题标题】：Conventional Vue structure for similar functionalities components (with Vuex)用于类似功能组件的常规 Vue 结构（使用 Vuex）
【发布时间】：2020-02-27 07:09:44
【问题描述】：

关于功能相似但只有 getter 和 action 不同的组件的约定问题。

如何在只有 getter 和 action 不同的情况下保持清洁/可维护？
我是否使用 mixin？高阶组件？使用开关盒？ 并尽可能解释您的选择

例如，以下组件是：

共享相同的sameFunction1() 和sameFunction2()
唯一的区别是 getter 和 action 不同

组件 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() {...},
  },
}

【问题讨论】：

见vuejs.org/v2/guide/mixins.html#Basics
你能解释一下 mixins 模式如何用于这种情况吗？
我在下面添加了answer w/ mixins pattern

标签： vue.js vuejs2 vuex

【解决方案1】：

基于 Estus Flask comment

我们可以使用 mixins 并像抽象类一样构建组件

混音

// 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() {...},
  },
}

【讨论】：