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!