Preciso separar as responsabilidades do meu store (vuex) de UM arquivo para dois(services e store); O problema é que independente de como eu faça mesmo utilizando outros exemplos ele sempre retorna o erro:
[vuex] unknown action type: loadApiCards
Pesquisei bastante no google e não sei dizer o que estou fazendo errado.
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
}
})
}
},
O arquivo 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')
}
}
O antigo arquivo store.js que estava funcionando:
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
}
})
}
},
new Vuex.Store({