2

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
           }
         })
       }
     },
2

1 Resposta 1

1

Conforme as mudanças que você fez a sua nova action é loadCards e não loadApiCards.

Tenta trocar o nome da chamada da sua action assim:

this.$store.dispatch('loadCards');
1
  • NOSSA, MUITO obrigada! Realmente eu nem tinha reparado nisso... que erro bobo mds Commented 25/03/2020 às 14:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .