Javascript can';t获取api数据并使用vuex-vue.js存储

Javascript can';t获取api数据并使用vuex-vue.js存储,javascript,vue.js,vuejs2,vuex,Javascript,Vue.js,Vuejs2,Vuex,我对vuex的api获取有问题。我的端点没有问题。我可以看到json数据。但当我试图获取它时,我无法存储数据并在下面显示控制台错误 挂载钩子中的错误:“类型错误: _api_article_js_uuWebpack_IMPORTED_MODULE_0_uu.default.getArticles不是函数“ 关于我的导入和导出: App.js window._ = require('lodash'); try { window.$ = window.jQuery = require('j

我对vuex的api获取有问题。我的端点没有问题。我可以看到json数据。但当我试图获取它时,我无法存储数据并在下面显示控制台错误

挂载钩子中的错误:“类型错误: _api_article_js_uuWebpack_IMPORTED_MODULE_0_uu.default.getArticles不是函数“

关于我的导入和导出:

App.js

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('foundation-sites');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Vue from 'vue';
import router from './routes.js';
import store from './store.js';

new Vue({
     router,
     store,
}).$mount('#app')
config.js

var api_url = 'mywebsite.com/api';

export const ESTATE_CONFIG = {
    API_URL: api_url,
}
import { ESTATE_CONFIG } from '../config.js';

export default {
    getarticles: function(){
        return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
    },
}
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import { articles } from './modules/articles.js'

export default new Vuex.Store({
    modules: {
        articles,
    }
});
import ArticleAPI from '../api/article.js';

export const articles = {
    state: {
        articles: [],
        articlesLoadStatus: 0,

        article: {},
        articleLoadStatus: 0
    },
    getters: {
        getArticlesLoadStatus( state ){
            return state.articlesLoadStatus;
        },
        getArticles( state ){
            return state.articles;
        },
    },
    mutations: {
        setArticlesLoadStatus( state, status ){
            state.articlesLoadStatus = status;
        },
        setArticles( state, articles ){
            state.articles = articles;
        },
    },
    actions: {
        loadArticles( { commit } ){
            commit( 'setArticlesLoadStatus', 1 );

            ArticleAPI.getArticles()
                .then( function( response ){
                  commit( 'setArticles', response.data );
                  commit( 'setArticlesLoadStatus', 2 );
                })
                .catch( function(){
                  commit( 'setArticles', [] );
                  commit( 'setArticlesLoadStatus', 3 );
                });
        },
    },
}
api/article.js

var api_url = 'mywebsite.com/api';

export const ESTATE_CONFIG = {
    API_URL: api_url,
}
import { ESTATE_CONFIG } from '../config.js';

export default {
    getarticles: function(){
        return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
    },
}
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import { articles } from './modules/articles.js'

export default new Vuex.Store({
    modules: {
        articles,
    }
});
import ArticleAPI from '../api/article.js';

export const articles = {
    state: {
        articles: [],
        articlesLoadStatus: 0,

        article: {},
        articleLoadStatus: 0
    },
    getters: {
        getArticlesLoadStatus( state ){
            return state.articlesLoadStatus;
        },
        getArticles( state ){
            return state.articles;
        },
    },
    mutations: {
        setArticlesLoadStatus( state, status ){
            state.articlesLoadStatus = status;
        },
        setArticles( state, articles ){
            state.articles = articles;
        },
    },
    actions: {
        loadArticles( { commit } ){
            commit( 'setArticlesLoadStatus', 1 );

            ArticleAPI.getArticles()
                .then( function( response ){
                  commit( 'setArticles', response.data );
                  commit( 'setArticlesLoadStatus', 2 );
                })
                .catch( function(){
                  commit( 'setArticles', [] );
                  commit( 'setArticlesLoadStatus', 3 );
                });
        },
    },
}
Store.js

var api_url = 'mywebsite.com/api';

export const ESTATE_CONFIG = {
    API_URL: api_url,
}
import { ESTATE_CONFIG } from '../config.js';

export default {
    getarticles: function(){
        return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
    },
}
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import { articles } from './modules/articles.js'

export default new Vuex.Store({
    modules: {
        articles,
    }
});
import ArticleAPI from '../api/article.js';

export const articles = {
    state: {
        articles: [],
        articlesLoadStatus: 0,

        article: {},
        articleLoadStatus: 0
    },
    getters: {
        getArticlesLoadStatus( state ){
            return state.articlesLoadStatus;
        },
        getArticles( state ){
            return state.articles;
        },
    },
    mutations: {
        setArticlesLoadStatus( state, status ){
            state.articlesLoadStatus = status;
        },
        setArticles( state, articles ){
            state.articles = articles;
        },
    },
    actions: {
        loadArticles( { commit } ){
            commit( 'setArticlesLoadStatus', 1 );

            ArticleAPI.getArticles()
                .then( function( response ){
                  commit( 'setArticles', response.data );
                  commit( 'setArticlesLoadStatus', 2 );
                })
                .catch( function(){
                  commit( 'setArticles', [] );
                  commit( 'setArticlesLoadStatus', 3 );
                });
        },
    },
}
模块/文章.js

var api_url = 'mywebsite.com/api';

export const ESTATE_CONFIG = {
    API_URL: api_url,
}
import { ESTATE_CONFIG } from '../config.js';

export default {
    getarticles: function(){
        return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
    },
}
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import { articles } from './modules/articles.js'

export default new Vuex.Store({
    modules: {
        articles,
    }
});
import ArticleAPI from '../api/article.js';

export const articles = {
    state: {
        articles: [],
        articlesLoadStatus: 0,

        article: {},
        articleLoadStatus: 0
    },
    getters: {
        getArticlesLoadStatus( state ){
            return state.articlesLoadStatus;
        },
        getArticles( state ){
            return state.articles;
        },
    },
    mutations: {
        setArticlesLoadStatus( state, status ){
            state.articlesLoadStatus = status;
        },
        setArticles( state, articles ){
            state.articles = articles;
        },
    },
    actions: {
        loadArticles( { commit } ){
            commit( 'setArticlesLoadStatus', 1 );

            ArticleAPI.getArticles()
                .then( function( response ){
                  commit( 'setArticles', response.data );
                  commit( 'setArticlesLoadStatus', 2 );
                })
                .catch( function(){
                  commit( 'setArticles', [] );
                  commit( 'setArticlesLoadStatus', 3 );
                });
        },
    },
}

我需要帮助。因为我不确定我做错了什么。当然,端点没有问题。我可以看到json数据。但是我的
vuex
存储是空的。我上面有个错误

该错误表示api/article.js中不存在名为
getArticles
的导出函数

看看这个模块,它看起来像是一个资本化问题。函数未大写,因此调用时,请使用:

ArticleAPI.getarticles

这看起来像是一个资本化问题。API的函数没有大写,因此它应该是
ArticleAPI.getarticles
您解决了它。谢谢你的提示。如果你把这个作为答案,我会检查它@丹