vuex error: [vuex] Unknown action type

Question

I need to separate the responsibilities of my store (vuex) from ONE file for two(services and store); The problem is that regardless of how I do it even using other examples it always returns the error:

[vuex] unknown action type: loadApiCards

I googled a lot and I can’t tell what I’m doing wrong.

Appsservices.js

    import axios from 'axios'
import {
  BaseURL,
  URL
} from './Apps.mappers'

export const loadApiCards = () => {
  return axios.get(`${BaseURL}/${URL}`)
    .then(result => result.data.apps)
    .catch(error => {
      throw new Error(`API ${error}`)
    })
}

store js.

actions: {
    loadCards ({ commit }) {
      AppsService.loadApiCards()
        .then(apiCards => commit('APP_CARDS ', apiCards)
        )
    }
  },
  mutations: {
    APP_CARDS (state, apiCards) {
      console.log('work')
      state.apiCards = apiCards
      this.apiCards = state.apiCards
      this.apiCards = addIcon(apiCards)

      function addIcon (element) {
        element.map((card, i) => {
          if (card.id === state.apiIconsCards[i].id) {
            card.icon = state.apiIconsCards[i].icon
          }
        })
      }
    },

The file Home.Vue

import { mapState } from 'vuex'
import Banner from '@/components/Banner.vue'
import FilterSelect from '@/components/FilterSelect.vue'
export default {
  name: 'Home',
  components: {
    Banner,
    FilterSelect
  },
   computed: mapState(['apiCards']),
   created () {
     this.$store.dispatch('loadApiCards')
   }
}

The old store.js file that was working:

Vue.axios.defaults.baseURL = 'https://demo3241810.mockable.io/'

actions: {
     loadApiCards ({
       commit
     }) {
       Vue.axios.get('apps').then(result => {
         commit('APP_CARDS', result.data.apps)
       }).catch(error => {
         throw new Error(`API ${error}`)
       })
     },
   mutations: {
     APP_CARDS (state, apiCards) {
       state.apiCards = apiCards
       this.apiCards = state.apiCards
       this.apiCards = addIcon(apiCards)

       function addIcon (element) {
         element.map((card, i) => {
          if (card.id === state.apiIconsCards[i].id) {
             card.icon = state.apiIconsCards[i].icon
           }
         })
       }
     },

Answer 1

As the changes you made to your new action are loadCards and not loadApiCards.

Try changing the name of your action call like this:

this.$store.dispatch('loadCards');