无法在组件中调度 Vuex 模块的操作

Posted 2023-02-19

【中文标题】无法在组件中调度 Vuex 模块的操作

【英文标题】：Could not dispatch actions of Vuex's module in component

【发布时间】：2019-10-18 04:27:09

【问题描述】：

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

这是我的主要商店代码：

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

export default store;

这是我的加载器商店代码：

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>

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

[vuex] 未知动作类型：loader/showLoader

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

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

【参考方案1】：

加载器模块的代码应该导出默认值。所以用export default 替换export default new Vuex.Store()。

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