Javascript can';t获取api数据并使用vuex-vue.js存储
我对vuex的api获取有问题。我的端点没有问题。我可以看到json数据。但当我试图获取它时,我无法存储数据并在下面显示控制台错误 挂载钩子中的错误:“类型错误: _api_article_js_uuWebpack_IMPORTED_MODULE_0_uu.default.getArticles不是函数“ 关于我的导入和导出: App.jsJavascript 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
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
您解决了它。谢谢你的提示。如果你把这个作为答案,我会检查它@丹