Vue：mixin 调用要在组件中实现的方法是一种反模式吗？答案

【问题标题】：Vue: Is it an antipattern for a mixin to call a method to be implemented in a component?Vue：mixin 调用要在组件中实现的方法是一种反模式吗？
【发布时间】：2020-09-30 06:26:47
【问题描述】：

我目前正在尝试将现有组件重构为 DRY，因此我正在构建一个 mixin。

但是，我发现有必要从 mixin 自己的方法或生命周期钩子中调用组件的特定方法，尽管它有效，但它在某种程度上作为一种反模式响起：

calendarMixin.js：

let calendarMixin = {
  created () {
    this.getCalendar();
  }
};

CalendarOne.vue

export default {
  mixins: [calendarMixin],
  methods: {
    ...mapActions('storeCalendarOne', ['getCalendar'])
  }
};

CalendarTwo.vue

export default {
  mixins: [calendarMixin],
  methods: {
    ...mapActions('storeCalendarTwo', ['getCalendar'])
  }
};

也许 mixin 中的某种文档适合指定使用 mixin 在组件中实现哪些方法必须，但它并不能解决与 OOP 接口等代码相关的任何问题会的。

我还想知道 Vue 中的 TypeScript 是否会为此提供解决方案，例如在 mixins 中定义严格的实现语句。

提前致谢。

【问题讨论】：

我还应该在mixin 中添加一个getCalendar 方法，这样当getCalendar 没有在两个组件之一中实现时，运行时不会出错

标签： typescript vue.js vuejs2 mixins

【解决方案1】：

如果您使用的是 vuex，我会像这样构建我的代码：

/src
  /mixins
    CalendarMixins.js
  /components
    CalendarOne.vue

CalendarMixins.js

import {mapActions} from 'vuex'

export default {
  created () {
    this.getCalendar();
  },
  methods: {
    ...mapActions(['getCalendar'])
  }
}

CalendarOne.vue

import CalendarMixins from '@/mixins/CalendarMixins'
import {mapActions} from 'vuex'

export default {
  mixins: [CalendarMixins],
  methods: {
    ...mapActions('storeCalendarOne')
  }
}

【讨论】：