无法在组件中分派 Vuex 模块的操作

Question

我是 Vue 和 Vuex 的新手。我有一个关于这个框架的问题，希望能得到一些帮助。

这是我的主要商店代码：

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

export default store;

这是我的 Loader 商店代码：

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'),
    }
})

最后是我的按钮组件：

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

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

如我所愿，单击按钮时，将显示 bootstrap 加载程序。但它没有，控制台日志显示此错误：

[vuex] unknown action type: loader/showLoader

我也在这个网站上搜索了很多主题，但仍然找不到解决的方法。我决定 post 在这里提出新问题。请帮助您找到一些问题。

非常感谢，对不起我的英语！

Answer 1

Loader 模块的代码应默认导出。所以将 export default new Vuex.Store({}) 替换为 export default {}.

更多：https://vuex.vuejs.org/guide/modules.html

无法在组件中分派 Vuex 模块的操作

Could not dispatch actions of Vuex's module in component

vue.js

vue-component

vuex

vuex-modules