Question

我有Vue.js项目，我想在其中使用实用程序类来实现要在所有模块中使用的功能。

modules / Utils.js

library

main.js

export default class Utils {
    array_count (arr) {
        return Array.isArray(arr) ? arr.length : 0;
    }
}

}）;

modules / some.js

import Vue from 'vue';
import Utils from 'modules/Utils';
export default new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    },
    utils: Utils // this has no affect?

我不太了解如何注入Utils类。上面的示例有效-但我想摆脱每个模块中Class的导入。我以为，当我将它添加到main.js中作为依赖项时，我应该可以在项目中的任何地方调用它。

Answer 1

当您想从每个组件访问助手时，可以注册一个全局mixin。将您的Utils.js更改为Mixin。

export default {
    methods: {
        array_count (arr) {
            return Array.isArray(arr) ? arr.length : 0;
        }
    }
}

然后，导入mixin并将其全局添加。

import Vue from 'vue';
import Utils from 'modules/Utils';
Vue.mixin(Utils);
export default new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    },

或者，如果您希望某些助手功能不在全局范围内而是仅在某些组件中可用，则可以导入mixin并将其手动添加到Vue组件中。

Vue2：包含/注入全局实用程序类的正确方法

1 个答案: