Vuex modules: Can't use mapActions

Question

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. :)

Answer 1

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.