vuex维护的是一个单一的状态树，对于复杂的vue项目，若只有一个store，则该store就会非常臃肿难以维护，为了解决这个问题，vuex允许在vue项目中将store进行模块化的处理，即可以将一个大的store分解成若干个小的store，每个store都有自己的state、mutation、action、getter

2、命名空间：

（1）在默认情况下，模块内部的state、mutation、action、getter是全局的，即所有组件都可以使用

（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在store定义时加入 namespaced：true 配置，当模块注册后，所有的state、mutation、action、getter都会根据模块注册的路径调整命名

vue代码如下:

主仓库（store）

import Vue from 'vue'
import Vuex from 'vuex'
//导入子模块
import Counter from './modules/Counter';
import UserInfo from './modules/UserInfo';

Vue.use(Vuex)

export default new Vuex.Store(
   state: ,
   getters: ,
   mutations: ,
   actions: ,
   modules: 
    a:Counter,//子模块仓库a
    b:UserInfo//子模块仓库b
   
)

子store模块a，js文件

const Counter = 
    namespaced: true,//开启命名空间
    state:
        count:10,
        info:'这是一个计数器',
    ,
    getters:
        doubleCount(state)
            return state.count * 2;
        ,
    ,
    mutations://同步
        add(state)//count加
            state.count++;
        ,
    ,

    actions://异步
        asyncAdd(content)
            setTimeout(()=>
                content.commit('add')
            ,2000)
        
    

export default Counter;

组件中使用vuex（store）：

A组件触发

<template>
    <div class="container">
        <h5>A组件</h5>
        <el-button size="mini" @click="add()">计数器加1</el-button>
        <el-button size="mini" @click="asyncAdd()">计数器异步加1</el-button>
     </div>
</template>

<script>
export default 
    name:'CompontentA',
    data() 
        return 
    ,
    methods:
        handleAdd()
            //触发a子模块下muations的add方法,来修改state中的count状态值
            this.$store.commit('a/add');
        ,
        handleAddAsync()
            //向a模块下actions派发异步add方法,从而触发muations中的add方法
            this.$store.dispatch('a/asyncAdd');
        ,
   
    

</script>

B组件显示数据

<template>
    <div class="container">
        <h5>B组件--显示信息</h5>
        <div>info: <span>&nbsp;&nbsp;</span> thisMsg </div>
        <div>计数器的值:&nbsp;&nbsp; thisCount </div>
        <div>计数器值的2倍:&nbsp;&nbsp; thisDoubleCount </div>
    </div>
</template>

<script>
export default 
    name:'CompontentB',
    data() 
        return 
        
    ,
    computed://使用到vue的计算属性,同步更新视图的数据
        thisMsg()
            return this.$store.state.a.info;
        ,
        thisCount()
            return this.$store.state.a.count;
        ,
        thisDoubleCount()//访问a模块下的doubleCount方法
            return this.$store.getters['a/doubleCount'];
        ,
    

</script>

二、vuex的四个辅助函数

首先在使用时需从vuex中导出辅助函数

import mapState,mapMutations,mapActions,mapGettersfrom 'vuex';

1、…mapState：用于解构state中状态属性

//基础写法：
count()
    return this.$store.state.cout

//简化写法
...mapState(['count'])

2、…mapGetters：用于解构getters中定义的方法

        // 基础写法
        handleAddAsync()
            this.$store.dispatch('a/asyncAdd');
        ,
        // 简化写法
        ...mapActions('a',['asyncAdd'])

3、…mapMutations：用于解构mutations中的方法，注意传参：在调用时直接传参

//基础写法
    handlerAdd() //同步加1：触发mutations中的addCount方法
      this.$store.commit('addCount', num: 1 )
    ,
    handlerSub() //同步减1：触发mutations中的subCount方法
      this.$store.commit('subCount', num: 1 )
    
//简化写法
...mapMutations(
      handlerAdd: 'addCount',
      handlerSub: 'subCount'
   ),


//html中直接传参的写法
<button @click="handlerAdd(num:1)">同步加1</button>
<button @click="handlerSub(num:1)">同步减1</button>

4、…mapActions：用于解构actions中的方法

    //基础写法
    handlerAddAsyn() //异步加1：触发actions中addCountAsyn方法
      this.$store.dispatch('addCountAsyn')
    ,
    handlerSubAsyn() //异步减1：触发actions中subCountAsyn方法
      this.$store.dispatch('subCountAsyn')
    
    //简化写法
    ...mapActions(
      handlerAddAsyn: 'addCountAsyn',
      handlerSubAsyn: 'subCountAsyn'
    )

以上是关于vuex中的模块化(modules)和命名空间(namespaced)，以及四个辅助函数的主要内容，如果未能解决你的问题，请参考以下文章

vuex中模块的命名空间到底是啥

vuex 模块还需要命名空间吗？

如何在模块命名空间中使用 Vuex 类型常量？

打字稿：引用 Vuex 存储模块会导致 VueJs 2.5 的命名空间错误

vue----webpack模板----vuex----modules子模块

如何为 vuex 命名空间模块状态创建 getter 和 setter