vuex辅助函数介绍和使用

Posted xixinhua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex辅助函数介绍和使用相关的知识,希望对你有一定的参考价值。

  在上篇中,我们可以知道如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名。显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的。

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、mapStore:把store属性映射到computed身上

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

 

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")
// }
// }
 

 

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"
        })
    }

 

 

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

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


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

          }
      

 

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

  操作。




以上是关于vuex辅助函数介绍和使用的主要内容,如果未能解决你的问题,请参考以下文章

Vuex进阶使用之modules模块化划分mapStatemapActions辅助函数的使用

vuex及其辅助函数简单使用

vuex中的辅助函数mapMutations详细解析

vuex辅助函数以及模块化

vue:vuex中mapStatemapGettersmapActions辅助函数及Module的使用

vuex - 辅助函数学习