Could not dispatch actions of Vuex's module in component

Question

I am a newbie of Vue and Vuex. And I have a question relates to this framework, hope will get some help.

This is my Main store code:

export default new Vuex.Store({
    modules: {
        loader: LoaderStore
    }
})

export default store;

And here is my Loader store code:

export default new Vuex.Store({
    namespaced: true,
    state: () => ({
        shown: false,
    }),
    mutations: {
        showLoader: state => state.shown = true,
        hideLoader: state => state.shown = false,
    },
    actions: {
        showLoader: ({ commit }) => commit('showLoader'),
        hideLoader: ({ commit }) => commit('hideLoader'),
    }
})

Finally is my button component:

<button @click="submit">Show Loader</button>

<script>
export default {
    methods: {
        submit() {
            this.$store.dispatch('loader/showLoader');
        }
    }
}
</script>

As I desire, when the button clicked, the bootstrap loader will be shown. But it didn't, and the console log show this error:

[vuex] unknown action type: loader/showLoader

I also searched many topic on this site but still could not find way to resolve. And I decide to post new question here. Please help you can find some issues.

Thanks so much and sorry for my English!

Answer 1

Loader module's code should export default. So replace export default new Vuex.Store({}) with export default {}.

More: https://vuex.vuejs.org/guide/modules.html