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!

According to screenshot, store data has been loaded successfully, so it works as expected. Are you sure that this.$store.dispatch('getCompanies') is not invoked anywhere else? — aBiscuit
lol, actually you are right i was starting to question myself, i was looking for an error on completely wrong side, thanks — Aleksandar Milicevic
That's one of the reasons why mapActions and other helpers are great. Helps to locate store usage quite efficiently. — aBiscuit
Yea i will check that more in depth for sure, first time using Vuex so I wasn't sure if i am doing things correctly — Aleksandar Milicevic
module namespace ` // this.$store.dispatch('doubleHundred'); // 🎉module namespace this.$store.dispatch('seatSelect/doubleHundred'); ` — xgqfrms

Syed Syed · Accepted Answer · 2019-03-20T20:23:57

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();
},

Vue/Vuex unknown action type

4 Answers