module

说明

解决单一状态树，项目解构复杂臃肿时；vuex提供模块功能将store分割为module，每个module都包含state、getters、mutations、actions以及子模块module

创建模块

1. store下创建module文件夹，再在Modlue文件夹下创建模块文件

2.模块文件配置 配置同store实例中一样，导出 Eg moduleA.js

    const moduleA = {
        state: {},
        getters: {},
        mutations: {},
        actions: {}
    }

    export default moduleA

1. 在index.js即store实例中注册模块

访问模块中的数据

    this.$store.state.模块名(store中注册的模块名).数据名

Eg

修改模块中的数据

使用mutations和commit提交

模块的局部状态

注意

除了state局部的，getters、mutations、actions都是全局

对于模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象

对于actions和getters,其第三个参数为根store实例的数据

命名空间

默认情况下，模块内部的action、mutation和getter 是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出响应

通过添加namespaced:true的方式使其成为带命名空间的模块，此时state、mutation、action、getter都是局部命名空间

模块中使用辅助函数

步骤

1. 引入辅助函数
2. 正常使用即可

Eg

    ...
    computed:{
        ...mapState("模块名",["要获取的数据"])
    },
    methods:{
        ...mapMutations("模块名",["触发的函数"])
    }