javascript - VueJS : apply mixin to async component

Question

我正在使用 Webpack 2 并通过特殊的 require 语法导入我的组件。

有超过 100 个组件，但一次只使用 5-10 个。它们中的大多数(但不是全部)部分具有相同的功能，例如 props 和生命周期钩子(Hook)。

这里是代码:

// app.js
...

Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

...

我想将 mixin 应用于异步组件，但该怎么做？ 全局 mixin 适用于所有组件，但这不是我需要的。

我发现feature request ，但它关闭了。

Answer 1

我发现了一些令人毛骨悚然的(？)解决方案，但是它有效:

// mixins.js
export default class Mixins {
   static fooMixin() {
     return {
       created: function () {
         console.log('mixin hook called');
       }
     }
   }
}

// app.js
Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

// foo.vue
<script>
  import Mixins from "mixins";

  export default {
    ...
    mixins: [Mixins.fooMixin()]
  }
</script>

但我希望有一个更优雅的解决方案。