vuex配置项modules

        当项目比较大时，所有的全局数据都存放在state里，会非常混乱，使用modules，把数据进行分类处理，即模块化

使用方法

        每个模块是一个独立的store，管理着不同类型的数据，然后总体的store引入所有的分模块store即可

在分模块中：

src/store/loading.js文件下

export default {
    namespaced:true,    
    state:{
        isLoading:false
    },   
    getters:{
        isAdult:function(){
            return "loading里的getters";
        }
    },
    mutations:{
        mIsLoading(state,payload){
            state.isLoading = payload.isLoading;
        }
    },    
    actions:{
       
    }
}

src/store/person.js文件下

import axios from "axios";

export default {
    namespaced:true,
    state:{
        age:12,
        isAdult:false
    },
    getters:{
        isAdult:function(state){
            return state.isAdult?"已成年":"未成年"
        }
    },
    mutations:{
        mAddAge(state,payload){
            if(state.age>=150){
                state.age=150;
                return;
            }
            state.age+=payload.inc;
            if(state.age>=18){
                state.isAdult = true;
            }else{
                state.isAdult = false;
            }
        }
    },    
    actions:{
        // 参数：
        // context就是 store对象
        // payload:载荷
        aAddAge(context,payload){
            axios({
                url:"/inc"
            }).then(res=>{               
                // 提交mutation
                context.commit({
                    type:"mAddAge",
                    inc:res.data.count
                })
            })
        }
    }
}

在总体store中引入：

src/store/index.js文件下

import Vue from "vue";
import vueX from "vuex";

Vue.use(vueX);
import loading from "./loading";
import person from "./person";

export default new vueX.Store({
    modules:{
        loading,
        person
    },
    state:{
        
    },
    getters:{
       
    },
    mutations:{
        
    },
    
    actions:{
        
    }
})

在组件里使用state数据时，多加个模块名即可

$store.state.person.age

在组件里使用getters时，可以不加模块名，但是必须保证所有分模块的getters里的方法不重名

<p>{{$store.getters.isAdult}}</p>   

如果重名了则要给分模块加命名空间namespaced：true

 <p>{{$store.getters["person/isAdult"]}}</p>

mutations的提交和actions的派发也同样需要加上模块名如下：

this.$store.dispatch({
          type:"person/aAddAge"
        });

ps:

     强烈要求一定给所有分模块加上命名空间 namespaced：true，使用的时候加上模块名好区分

---

辅助函数

组件的模板上过重（写了一长串），为了减少代码量，使用映射方式，将vuex的代码映射到组件中

mapState

在组件中的computed中不分模块的写法：

组件中引入 import {mapState} from "vuex"

computed:{
                ...mapState(['count',"count2"])
                }
就等价于
computed:{
        count(){
                return this.$store.state.count
                  }
        }

在模板上使用

{{count}}
{{count2}}

分模块的写法

 computed:{
                ...mapState(['count',"count2"，"person"])
                }

会将person块的所有state映射过来 

在模板上使用

{{person.age}} 

---

mapGetters

在组件中，import {mapState,mapGetters} from "vuex"

不分模块的写法

 computed:{
                ...mapGetters(['isAdult'])
                }

分模块的写法

  computed:{
                ...mapGetters("person",['isAdult'])
                }

模板上的使用

{{isAdult}} 

---

mapMutations和mapActions

 在组件中，import {mapState,mapGetters,mapMutations,mapActions} from "vuex"

不分模块

methods:{
                   ...mapActions(["change"]),
                    changeFun(){
                                this.change()
                                        };
                }

之前的写法

methods:{
                    changeFun(){
                                this.$store.dispatch("change")
                                        };
                }

分模块

 export default{
    namespaced:true,
    ………………
    actions:{
        aAddAge(context,payload){
            console.log("moudleB的actions");
        }
    }
}

 组件里

<template> 
    <div >    
        <h5>Banner组件:</h5>    
        <input type="button" value="长大" @click="addAge">      
    </div>
</template>
 <script>
import { mapState,mapGetters, mapActions } from "vuex";
export default {  
    name: "Banner",  
    methods:{    //把"moudleB/aAddAge"映射到当前组件的方法（方法名：aAddAge)  
        ...mapActions({"aAddAge":"moudleB/aAddAge"}),    
        addAge(){     
            this.aAddAge(｛num:5｝);//调用映射的方法名（这个名字可以自己起）参数正常传    
        }
    }
};
 </script>

        这样一来，不需要再写提交的代码，而是直接把vuex的数据和方法映射到组件中，模板上也不需要写一长串的$store，注意，state和getters映射到computed中，mutations和actions都是方法，写到methods中，vuex的数据和方法拿过来后就是组件的方法和数据，该怎么用还怎么用