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

Question

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

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

日历混合.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 中定义严格的实现语句。

提前致谢。

标签： typescriptvue.jsvuejs2mixins

Answer 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')
  }
}