Vue：mixin调用要在组件中实现的方法是否是反模式？

问题描述

我目前正在尝试将现有组件重构为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中定义严格的实现语句。

谢谢。

解决方法

如果您使用的是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')
  }
}