Tukukkk

After creating a project with ApiPlatform and generate some code with the VueJs code generator I was unable to dispatch some actions... Here is the example:

main store file

export default new Vuex.Store({

    modules: {

        ...

        producto,

        ...

    }

})

main producto store file

export default {

  namespaced: true,

  modules: {

    list, //here is the action I want to use

    create,

    update,

    show,

    del

  }

}

main producto/list store file

import * as actions from './actions'

import * as getters from './getters'

import mutations from './mutations'

export default {

  namespaced: true,

  state: {

    error: '',

    isLoading: false,

    items: ,

    view: 

  },

  actions,

  getters,

  mutations

}

actions file

const getItems = ({ commit }, page = '/productos') => {

  commit(types.TOGGLE_LOADING)



  fetch(page)

    .then(response => response.json())

    .then((data) => {

      commit(types.TOGGLE_LOADING)

      commit(types.SET_ITEMS, data['hydra:member'])

      commit(types.SET_VIEW, data['hydra:view'])

    })

    .catch((e) => {

      commit(types.TOGGLE_LOADING)

      commit(types.SET_ERROR, e.message)

    })

}



export default getItems

In a component I map the getter for items from producto store and I get an empty array(as expected). but when I call this.$store.dispatch('producto/list/getItems') vuex throws an error because there is no such getItems action.

I do not know why the getter is working but the action is not.

Any tip? I need to call that action in order to fill the items array from the producto store.

Thanks in advance

I think you might need namespaced: true on the main store as well as the producto store

export default new Vuex.Store({

  namespaced: true,

  modules: {

    ...

    producto,

    ...

  }

})

because this.$store.dispatch('producto/list/getItems') effectively has two namespaces in it.