Vue/Vuex unknown action type

Question

I have started implementing Vuex in my application and I decided to split my store into modules.

For the beginning I created only one module to test how Vuex modules works because I didn't have any previous experience with it.

I created a modules folder and inside I have one folder for my module called Company. Inside the company folder I have created next files: action.js, getters.js, index.js, mutations.js.

The code inside these files:

action.js:

import api from '@/vuex/utils/api'  const getCompanies = (context) => {     api.get('/57/companies').then(response => {         context.commit('GET_COMPANIES', response)     }).catch((error) => {         console.log(error)     }) }  export default {     getCompanies } 

NOTE: Inside the api that i import i just created methods for basics operations(get,post,delete,etc...)

getters.js:

const allCompanies = state => state.companies  export default {     allCompanies } 

mutations.js:

const GET_COMPANIES = (state, companies) => {     state.companies = companies }  export default {   GET_COMPANIES } 

index.js:

import actions from './action' import getters from './getters' import mutations from './mutations'  const state = {   companies: [] }  export default {   namespaced: true,   state,   actions,   getters,   mutations } 

After creation of this module I have added it to my store like this:

store.js:

import Vue from 'vue' import Vuex from 'vuex' import companyModule from './modules/company'  Vue.use(Vuex)  const store = new Vuex.Store({   modules: {     company: companyModule   } })  export default store 

NOTE I have told my vue app to use this store inside main.js file

To test this I have created simple HelloWorld component where I attempted to load the data inside simple html table. Here the problem showed up. Inside the mounted hook i have dispatched my action called getCompanies and I can see the data inside my table, its there, but i am getting error inside my dev console telling me:

vuex.esm.js?358c:417 [vuex] unknown action type: getCompanies

Code for HelloWorld component:

import { mapGetters } from 'vuex'  ...   computed: {     ...mapGetters({         companies: 'company/allCompanies'      }) }  ...  mounted () {     this.$store.dispatch('company/getCompanies') }  ... 

Data is present in my store, check screenshot from my vue devtools:

So my question is why am I getting this error inside my console, am I missing something, and how is it working with that error. Thanks!

Answer 1

Try this:

import { mapGetters,  mapActions} from 'vuex'  computed: {   ...mapGetters({     companies: 'company/allCompanies'   }) }  methods: {   ...mapActions(['company/getCompanies', 'company/getEmployees']) },  mounted() {   this['company/getCompanies'](); }, 

But, I like to do namespacing as done below, but it has an issue, refer the issue here.

methods: {   ...mapActions('company', ['getCompanies', 'getEmployees']) },  mounted() {   this.getCompanies();   this.getEmployees(); },