vuex unknown action type: ADD_ARTICLE - vue.js

Question

I'm trying to insert a title to my database using vuex but encountered an error.
As far as I know I am calling the action correctly but idk why it gives me error, from what I've read it is something about namespacing
[vuex] unknown action type: ADD_ARTICLE
<template>
<section>
<v-container fluid>
<v-card raised></v-card>
<v-card raised style="margin-top:10px">
<v-card-text class="headline font-weight-black">
<v-layout>
<v-row align-content="center">
<v-col>
TITLE
{{title}}
<v-text-field
v-model="title"
filled
placeholder="Provide a Title for the article"
prepend-icon="title"
></v-text-field>
</v-col>
</v-row>
</v-layout>
<v-layout align-end justify-end>
<v-btn color="red white--text" style="margin:10px" #click="passToDB">SUBMIT</v-btn>
</v-layout>
</v-card-text>
</v-card>
</v-container>
</section>
</template>
<script>
import { mapActions } from "vuex";
export default {
data() {
return {
title: ""
};
},
methods: {
...mapActions(["ADD_ARTICLE"]),
passToDB() {
this.ADD_ARTICLE(this.title);
}
}
};
</script>
and this is article module where I will export to store.js
import axios from 'axios';
//state
const state = {
articles: []
};
//getters
const getters = {
allArticles: (state) => state.articles
}
//mutations
const mutations = {
RETRIEVE_ARTICLES: (state, articles) => (state.articles = articles),
ADD_ARTICLE: (state, article) => state.articles.push(article)
};
//actions
const actions = {
//retrieve articles in server
async loadArticles({ commit }) {
const response = await axios.get('http://localhost:9001/article/articles');
commit('RETRIEVE_ARTICLES', response.data);
},
async addArticle({ commit }, TITLE) {
const response = await axios.post('http://localhost:9001/article/add', {
TITLE: TITLE
});
commit('ADD_ARTICLE', response.data)
}
};
//export
export default {
state,
getters,
actions,
mutations
};
here is my store.js
import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
import article from './modules/article';
Vue.use(Vuex)
export default new Vuex.Store({
//import modules
modules: {
login,
article
}
});

Answer 1

In your store you declared an addArticle action but you are importing ADD_ARTICLE.
You just need to change it like that :
import { mapActions } from "vuex";
export default {
data() {
return {
title: ""
};
},
methods: {
...mapActions(["addArticle"]),
passToDB() {
this.addArticle(this.title);
}
}
};
As pointed by #Eugen Govorun by default namespacing is turned off.
If you turned it on by doing :
export default {
state,
getters,
actions,
mutations,
namespaced: true
};
You would have used your Action by doing so :
import { mapActions } from "vuex";
export default {
data() {
return {
title: ""
};
},
methods: {
...mapActions("article", ["addArticle"]),
passToDB() {
this.addArticle(this.title);
}
}
};
Because you are importing your module with the name article.

Answer 2

By default namespacing is turned off. There is no ADD_ARTICLE action in your article module. Just mutation with such a name. Your action name actually is addArticle.