VueJS：将mixin应用于异步组件

Question

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

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

这里是代码：

// app.js 
... 

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

... 

我想申请混入到异步组件，但该怎么做？ Global 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> 

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