Vuex modules: Can't use mapActions

0
votes

I can't use mapActions to point to one the actions of my modules. According to the docs, module actions by default are not namespaced in Vuex, so the actions of my module should be available just like the main store actions. Here is my setup:

Store

import * as ModuleA from './ModuleA';
Vue.use(Vuex);

export default new Vuex.Store({
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {  ... },
    modules: {
      A: ModuleA,
    }
});

Module A

let ModA = {
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {
        FuncA: function({ commit }, id) {
            //do something
        },
    },
});

export default ModA;

Component

<template>
    ...
</template>
<script>
    import { mapGetters, mapActions } from "vuex";
    export default {
        data() {
        },
        methods: {
            ...mapActions(['FuncA']),
        }
    }
};
</script>

Running it, Vuex gives me the following message:

unknown action type: FuncA

What am I missing? Must have something to do with the fact that JS is not my specialty. :)

3
javascriptvue.jsvuex
Try instead of import * as ModuleA from './ModuleA';, use import ModuleA from './ModuleA'; – adnanmuttaleb
That was it. Thanks a bunch. I'll accept it as answer if u want to post. – dotNET
I added an answer for new comers – adnanmuttaleb

3 Answers

1
votes

I am glad this solved your problem:

So instead of:

import * as ModuleA from './ModuleA';

To use:

import ModuleA from './ModuleA'

Default export can be Imported directly with any alias.

0
votes

Please try to use the module name in your mapActions ...mapActions("A",["FuncA"]). You can use also objects to change the action name in your component ...mapActions("A",{FunctionA:"FuncA"})

0
votes

As I see your codes, I think that you have to change some codes to import your modules based on ES6 correctly!!

so try this one:

  1. your store
// if you use index.js or store.js to store this codes,
// you have to import 'vue' and 'vuex'
import Vue from 'vue'
import Vuex from 'vuex'
import ModuleA from './ModuleA';

Vue.use(Vuex);

export default new Vuex.Store({
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {  ... },
    modules: {
      ModuleA, // in ES6 if don't need property name for introduce your module
    }
});
  1. your ModuleA
// just export it
export default {
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {
        // I used arrow function syntax, but you can use your syntax
        FuncA({ commit }, id) => {
            //do something
        },
    },
});