CODEWITHSUNDEEP
javascriptvue.jsvuex
tx291
tx291

Reputation: 1331

'unknown action type' with Vuex mapAction

I am new to Vuex and trying to use mapActions to fetch some data from my store, and send it into my component's template. I keep getting the error message [vuex] unknown action type: getItemDetail but I don't know why.

In my store, the action I'm trying to dispatch is getItemDetail. My full store is

import fetch from './fetch';

const url = 'items';

const defaults = {
  id: '',
  rating: '',
  type: '',
};

const state = { ...defaults, };

const getters = {};

const actions = {
  getItemDetail ({ commit, }, itemId) {
    fetch.get(`${url}/${itemId}`).then((response) => {  
      commit('setItemDetail', { ...defaults, ...response.data, });
    });
  },
};

const mutations = {
  setItemDetail (state, item) {
    state.item = item;
  },
};

export default {
  namespaced: true,
  state,
  getters,
  actions, 
  mutations,
};

In my component I have:

<template>
  <div>
    <p> {{ itemDetail }} </p>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {

  computed: {
    itemDetail () {
      this.getItemDetail('23451');
      return this.$store.state;
    },
  },
  methods: {
    ...mapActions([
      'getItemDetail',
    ]),
  },
};
</script>

Any help would be much appreciated!!!

Upvotes: 1

Views: 1511

Answers (1)

Seblor
Seblor

Reputation: 7136

From what I see of your code, you are in a namespaced store module.

To access a namespaced action, you need to map it with the name of the store module as the first parameter (the same should be applied for any mapState or mapGetter) :

methods: {
  ...mapActions("yourModuleName", [
    'getItemDetail',
  ]),
},

Upvotes: 2

Related Questions