vueX的核心概念详解、vuex怎么在组件定义、怎么在组件获取值，vuex的辅助函数有哪些、vuex辅助函数怎么使用

一、vuex核心属性

state

定义：数据仓库，存储所有的共享数据 ，相当于vue组件里的data，是一个单一状态树
使用：
1.在组件中使用（store->index.js）

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    }
});

2.组件里获取：this.$store.state.属性名。

computed:{
getAge(){return $store.state.age}}
isAdult(){return $store.state.isAdult}
isAllowMarry(){return $store.state.isAllowMarry?"可以结婚了":"不要着急，再等等"}
}

Getter

定义：在state的基础上派生的数据， 相当于vue组件里 computed
组件里获取：{$store.getters.ageChina}

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
        ageChina:state=>{
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
            }
            return str+'岁';
        }
    },
});

Mutation

定义：修改state的数据时，用mutation，这与跟踪状态有关系。

强烈建议，在vuex中，使用mutation改变state中的值。可以在vuex对象中使用严格模式来检
测：const store = new Vuex.Store({ strict: true })

修改：

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
        ageChina:state=>{
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
            }
            return str+'岁';
        }
    },
    // mutations：是跟踪状态。这里面只能有同步代码，这是必须的。
    mutations:{
    //    incAge(state,num){
    //        state.age+=num;
        //state：就是store对象里的state，不用程序员传入
        //payload：就是形参，叫作载荷
        incAge(state,payload){
            state.age+=payload.num;
           if(state.age>=18){
              state.isAdult = "已成年";
           }else{
              state.isAdult = "未成年";
           }
           if(state.age>=22){
               state.isAllowMarry = true;
           }else{
               state.isAllowMarry = false;
           }
       }
    },
   …………………………………………
});

提交mutation：

//组件里提交
this.$store.commit('incAge',num);

//action提交
incAge(context,num){
     context.commit('incAge',num);
}

Action

定义：解决mutation里只能有同步代码的问题，action里可以有异步代码
使用：

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
        ageChina:state=>{
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
            }
            return str+'岁';
        }
    },
    // mutations：是跟踪状态。这里面只能有同步代码，这是必须的。
    mutations:{
    //    incAge(state,num){
    //        state.age+=num;
        incAge(state,payload){
            state.age+=payload.num;
           if(state.age>=18){
              state.isAdult = "已成年";
           }else{
              state.isAdult = "未成年";
           }
           if(state.age>=22){
               state.isAllowMarry = true;
           }else{
               state.isAllowMarry = false;
           }
       }
    },
    // 如果出现异步操作，就需要使用action，action不是必须的。
    actions:{
    //    incAge(context,num){
    //        context.commit('incAge',num);
    //    }
        // incAge(context,payload){
        //     context.commit('incAge',payload);
        // }
        //context:是store对象
        incAge(context,payload){
            // context.commit('incAge',payload);
            context.commit(payload);
        }
    }
});

Action与mutation的异同：

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
（
在代码的角度上，action是来提交mutation的
在用途(意义)上：区分 actions 和 mutations 并不是为了解决竞态问题，而是为了能用 
devtools 追踪状态变化。 vuex 真正限制你的只有 mutation 必须是同步的这一点。当然
actions可以包含任何异步操作，如果程序员自己想处理异步操作，也可以不使用actions。
）

Modules

引入：当项目比较大时，所有的全局数据存放在state里，会非常混乱，怎么办？使用module，把数据分门别类的进行处理，即：模块化。

定义：每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

两个模块分别管理不同类型的数据：

./src/store/moduleA.js

export default {
	state: {count:1}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleA的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}
                                                   
./src/store/moduleB.js
export default {
	state: {count:2}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleB的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}

在总的store里包含所有的模块：

./src/store/index.js

import Vue from "vue";
import vueX from "vuex";
import moduleA from "./moduleA";
import moduleB from "./moduleB";

Vue.use(vueX);

export default new vueX.Store({
    modules:{
        moduleA:moduleA,
        moduleB:moduleB
    }
    //简写：
    modules:{
        moduleA,moduleB
    }
});

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

$store.state.moduleA.count // -> moduleA 的状态
$store.state.moduleB.count // -> moduleB 的状态

组件里派发action（或者提交mutation）时，如果，直接写action（mutation）的名字，那么就会找到所有同名的action（mutation）。

//在组件内容，派发action
this.$store.dispatch({
   type:"incCount"
 });
那么就会，派发给moduleA和moduleB里的incCount。即：moduleA和moduleB里的incCount
都被执行了。如果不希望这样，那就用命名空间

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

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及
mutation 都会自动根据模块注册的路径调整命名。

1.模块定义时，加上namespaced:true

export default {
    namespaced:true,
    state:{
        count:1
    },
    mutations:{
       ……………………
    },
    actions:{        
        incCount(context){
            console.log("moduleA的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }
}

2.组件里派发action时，加上模块名

this.$store.dispatch('moduleA/incCount');

二、vuex辅助函数

1、vuex的辅助函数有：mapState、mapGetters、mapMutations、mapActions
2、vuex辅助函数的使用