vuex的模块化与命名空间

vuex项目是一直在使用，但是当系统业务需求增加，需要维护的状态越来越多时，就会难以管理，这时就考虑将store模块化（module)，每个模块都会拥有自己的 state、mutation、action、getter
基本使用
1、在项目中的 store 文件夹下新建一个文件夹 modules
2、在modules文件夹中先定义两个模块，AModule,BModule

Amodule/index.js

const AModule = {
    state: () => ({
        username: '张三'
    }),
    getters:{
        usernameHandle(state){
            return '名称:' + state.username;
        }
    }
}

export default {
    ...AModule
}

BModule/index.js

let BModule = {
    state: () => ({
        count: '2'
    }),
    getters: {
        countHandle(state){
            return '订单' + state.count
        }
    }
}
 export default {
    ...BModule
 }

3、在store中引入模块

import AModule from './modules/AModule'
import BModule from './modules/BModule'

export default new Vuex.Store({
    modules: {
        AModule,
        BModule
    }
})

至此我们已经完成了基本的模块化，接下来我们看看如何使用它

<template>
  <div>
    <!-- 使用 AModule 模块中的 state 需要通过 $store.state.AModule.xx -->
    <h2>{{$store.state.AModule.username}}</h2>
    <!-- 使用 AModule 模块中的 getters 通过 $store.getters.xx 不需要带上AModule模块名-->
    <h2>{{$store.getters.usernameHandle}}</h2>
  </div>
</template>

至于原因呢，是因为默认情况下，模块内部的state是注册在局部命名空间的，而 action、mutation、getter 是注册在全局命名空间，也就是为什么获取 getters 的时候不需要带上homeModule模块名，而 state 需要带上模块名