CODEWITHSUNDEEP
javascriptvue.jsvuexvuejs3
Nesrine Missaoui
Nesrine Missaoui

Reputation: 19

How to solve error : [vuex] unknown action type: (method)

I am trying to display data with vuex from api using store (vuex)

so this is my store.js file :

import { createStore } from 'vuex'
import countries from './module/countries'

const store = createStore({
  modules: {
    countries
  }
});

export default store;

countries.js file

import axios from "axios";

const state = {
  countries:  []
};
const getters = {
  getCountries: () => {
    return state.countries;
  }
};
const mutations = {
  setCountries(state, countries) {
    state.countries = countries;
  }
};
const actions = {
  getCountries ({ commit }) {
    axios.get("https://localhost:44391/api/Pho/GetCountries").then(response => {
       commit('setCountries', response.data);
    })
  }
};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

and this is my component

 methods: {
   getCountries() {
      this.$store.dispatch('getCountries');
   },

When i run the application i got this error [vuex] unknown action type: getCountries

Upvotes: 0

Views: 3171

Answers (2)

Serap
Serap

Reputation: 1

Store.js

import countries from "./modules/countries "

Vue.use(Vuex);

export const store = new Vuex.Store({     
    modules : {
        countries
    }
});

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You are using namespaced modules, so try like:

this.$store.dispatch('countries/getCountries');

and call your geter like:

computed: {
  getData() {
    return this.$store.getters['countries/getCountries']
  }
}

Upvotes: 4

Related Questions