I have problem about api fetch with vuex. And there is no problem with my endpoint. I can see the json data. But when I try to fetch it i can't store the data and displaying console error below.
Error in mounted hook: "TypeError: _api_article_js__WEBPACK_IMPORTED_MODULE_0__.default.getArticles is not a function"
About my import and export:
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,
}
api/article.js
import { ESTATE_CONFIG } from '../config.js';
export default {
getarticles: function(){
return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
},
}
Store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import { articles } from './modules/articles.js'
export default new Vuex.Store({
modules: {
articles,
}
});
modules/articles.js
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 );
});
},
},
}
I need help about this. Because I am not sure what I am doing wrong here. And of course there is no problem with the endpoint. I can see the json data. But my vuex store is empty. And I have an error above.
ArticleAPI.getarticles