CODEWITHSUNDEEP
vue.jsvuexstore
Melvyn ROUAULT
Melvyn ROUAULT

Reputation: 35

Unknow action type error using vuex store

I am trying to dispatch an action but I get this error: "Unknow action type".

I got why i have this error but I just don't know what i did wrong.

My Component: 

created() {
    this.$store.dispatch('techValid/fetchTechValids');
  },

My Store (index.js) :

import Vue from 'vue';
import Vuex from 'vuex';
import techValid from './modules/techValid';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {   techValid,
  },
});

My store (techValid.js is ina module folder in the store):

actions: {
    async fetchTechValids() {
      await axios
        .get('http://localhost:3080/techValid')
        .then((response) => {
          console.log('API CALL OK');
          console.log(response);
          techValid.commit('SET_ALL_TECHVALIDS', response);
        })
        .catch((error) => {
          console.log('API CALL NOT OK', error);
          throw new Error(`${error}`);
        });
    },
  },

Main.js:

//Some imports

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
});

Upvotes: 0

Views: 316

Answers (2)

Melvyn ROUAULT
Melvyn ROUAULT

Reputation: 35

Ok thanks to all of you!

It works now, I removed the module name in my dispatch : this.$store.dispatch('fectTechValids')

And removed the namespaced in my store and just export state, getters, mutations, actions

Upvotes: 0

Rijosh
Rijosh

Reputation: 1544

You can simply call the actions with the action name like this

created() {
    this.$store.dispatch('fetchTechValids');
}

You don't need to specify the module name while calling actions and mutations.

And inside the action function, you can call the mutations like

actions: {
  async fetchTechValids({commit}) {
     let response = await axios.get('http://localhost:3080/techValid'); // since async function is using, you can directly get the response.
     console.log('API CALL OK');
     console.log(response);
     commit('SET_ALL_TECHVALIDS', response);
  },
}

You can use if condition to before calling the commit and can use the try-catch to catch the errors.

Upvotes: 1

Related Questions