尝试从导入的ES6模块调用静态方法

时间:2017-11-03 01:48:54

标签: javascript module ecmascript-6 vue.js

我正在使用Firefox 56,dom.moduleScripts.enabled设置为true。这允许我使用本机ES6模块。

我有一个vue2组件,它有一个定义的方法:

import StorageZonesAjaxMethods from '../../ajax/storage-zones.js';
....
methods: {
        updateList() 
        {
            //console.log(StorageZonesAjaxMethods);
            StorageZonesAjaxMethods.getList();//function(response) { this.list = response.data.payload;});

        },
    },

其中带有方法的类是:

export default new class StorageZonesAjaxMethods {

    static getItem(id, then)
    {
        axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`)
            .then(response => then);
    }

    static getList(then)
    {
        alert('in get list');
        axios.get(`${Config.apiBaseUrl}/storage-zones`)
            .then(response => then);
    }

我在firefx中收到错误"TypeError: (intermediate value).getList is not a function",但是console.log显示错误,但由于某种原因它在构造函数中。发生了什么事?

2 个答案:

答案 0 :(得分:0)

经验教训 - 不要用疲惫的眼睛编码。班级中的export default new class StorageZonesAjaxMethods不应该有new

答案 1 :(得分:0)

Never use new class { … }

还有don't default-export a class with only static methods。简化为

export default {
    getItem(id) {
        return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
    }
    getList() {
        alert('in get list');
        return axios.get(`${Config.apiBaseUrl}/storage-zones`);
    }
};

甚至可以更好地更改这两个文件并使用

export function getItem(id) {
    return axios.get(`${Config.apiBaseUrl}/storage-zones/${id}`);
}
export function getList() {
    alert('in get list');
    return axios.get(`${Config.apiBaseUrl}/storage-zones`);
}

import * as StorageZonesAjaxMethods from '../../ajax/storage-zones.js';