vuex辅助函数和vuex5个属性

Vue有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。

总结
state => 基本数据 
getters => 从基本数据派生的数据 
mutations => 提交更改数据的方法，同步！ 
actions => 像一个装饰器，包裹mutations，使之可以异步。 
modules => 模块化Vuex

1、辅助函数：

　　通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。

　　state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

2、如何使用辅助函数

　　　在当前组件中引入Vuex

　　　通过Vuex来调用辅助函数

3、辅助函数如何去映射vuex.store中的属性

　1、mapState:把state属性映射到computed身上

computed:{
         ...Vuex.mapState({
            input:state=>state.inputVal,
            n:state=>state.n
        })   
    }

属性1：state：    
      用来存储公共的状态  在state中的数据都是响应式的。 
        响应式原因：state里面有一个getters、setters方法；data中的数据也是响应式的，因为里面也有getters和setters方法

      辅助函数
        mapState

        1、在computed属性中来接收state中的数据  接收方式有2种（数组和对象，推荐对象）

          computed:Vuex.mapState(["属性"])  把state中的数据通过mapState映射到computed组件身上

          computed:Vuex.mapState({
            key:state=>state.属性   //优点：01本身key值是别名，要的是val的值，key的值a 和 val="a"一样就行，随意写。
                                      减少state里面长的属性名。 02可以在函数内部查看state中的数据
                                      数组方式的话，必须按照state中的属性名
          })


        2、如果自身组件也需要使用computed的话，通过解构赋值去解构出来

          computed:{
            ...Vuex.mapState({
               key:state=>state.属性
            })
          }

　2、mapAcions：把actions里面的方法映射到methods中

methods:{
        ...Vuex.mapActions({
            add:"handleTodoAdd",    //val为actions里面的方法名称
            change:"handleInput"     
        })
    }
//直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作

之前我们还需要这样写一大串函数调用，
// methods: {
// handleInput(e){           
// let val = e.target.value;

// this.$store.dispatch("handleInput",val )
// },
// handleAdd(){
// this.$store.dispatch("handleTodoAdd")
// }
// }

属性2：actions:     
        actions里面的函数主要用来处理异步的函数以及一些业务逻辑,每一个函数里面都有一个形参 这个形参是一个对象
        里面有一个commit方法，这个方法用来触发mutations里面的方法
        
        辅助函数
        mapActions

        使用方式
          methods:Vuex.mapActions([""])


          methods:{
            ...Vuex.mapActions({
              key:val--->actions里面的方法名称
            })

          }

3、mapMutations：把mutations里面的方法映射到methods中

　　　　只是做简单的数据修改（例如n++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。

methods:{
      
        ...Vuex.mapMutations({
            handleAdd:"handlMutationseAdd"
        })
    }

属性3：mutations：    
      mutations里面的函数主要用来修改state中的数据。mutations里面的所以方法都会有2个参数  一个是store中的state
      另外一个是需要传递的参数

      辅助函数
      mapMutations
             使用方式
          methods:Vuex.mapMutations([""])


          methods:{
            ...Vuex.mapMutations({
              key:val--->actions里面的方法名称
            })

          }

 理解state、actions、mutations，可以参考MVC框架。state可以比喻成一个数据库，知识它是响应式的，刷新页面数据就会改变；actions比喻成controller层，做数据的业务逻辑；mutations比喻成model层，做数据的增删改查操作。

4、mapGetters:把getters属性映射到computed身上

computed:{
        ...Vuex.mapGetters({
            NumN:"NumN"
        })
       
    }

属性4：getters:计算属性
          getters类似于组件里面computed同时也是监听属性的变化，当state中的属性发生改变的时候就会
          触发getters里面的方法。getters里面的每一个方法中都会有一个参数 state


          使用方式
            this.$store.getters.方法名称


          辅助函数

            mapGetters


            mapgetters使用在组件的computed中


            1、
              Vuex.mapGetters(["方法名称"])
              Vuex.mapGetters({
                key:val--》val就是getters中的函数名称
              })

5、modules属性:  模块 （和辅助函数没关系了）

　　　　把公共的状态按照模块进行划分

　　　　1、每个模块都相当于一个小型的Vuex

　　　　2、每个模块里面都会有state getters actions mutations

　　　　3、切记在导出模块的时候 加一个 namespaced:true 主要的作用是将每个模块都有独立命名空间