手记

挑战全网最幽默的Vuex系列教程:第五讲 Vuex的小帮手

先说两句

前面已经讲完了 Vuex 下的 StateGetterMutationAction 这四驾马车,不知道大家是否已经理解。当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行。

其实只要把这四驾马车完全熟练驾驭了,那么应对一些中小型的项目,基本上就已经没啥问题了,后面的 Module 这架终极马车,其实是为了搞定那些稍微大型复杂一点的项目,避免 store 里面的数据太多,难以管理而设计,这驾马车稍微比较抽象,不太好驾驭,我们下一讲再来详细的去剖解它。

Vue 里面的很多配套设施,在使用体验上一直都追求着简洁,追求着极致,哪里不爽改哪里,所以这也是为什么 Vue 能够长时间深得民心的一个很重要的原因所在。那么这一讲,主要就和大家简单的聊一聊 Vuex 的一些常用的辅助函数。

mapState

通过前面的学习,我们知道,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。

那么,当一个组件需要获取多个状态的时候,怎么办?是不是这样:

export default {
  ...
  computed: {
      a () {
        return store.state.a
      },
      b () {
        return store.state.b
      },
      c () {
        return store.state.c
      },
      ...
   }
}

当然,这样是没问题的,但是总感觉写起来很难受,看起来更难受是吧!既然这么容易我们就感受到了,Vuex 能感受不到吗,能忍得了吗?

绝对不能忍,所以 mapState 辅助函数被创造了出来,用来搞定这个人人为之咬牙切齿的痛点。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    a: state => state.a,
    b: state => state.b,
    c: state => state.c,

    // 传字符串参数 'b'
    // 等同于 `state => state.b`
    bAlias: 'b',

    // 为了能够使用 `this` 获取局部状态
    // 必须使用常规函数
    cInfo (state) {
      return state.c + this.info
    }
  })
}

通过上面的示例,可以了解到,我们可以直接把需要用到的状态全部存放在 mapState 里面进行统一管理,而且还可以取别名,做额外的操作等等。

如果所映射的计算属性名称与 state 的子节点名称相同时,我们还可以更加简化,给 mapState 传一个字符串数组:

computed: mapState([
  // 映射 this.a 为 store.state.a
  'a',
  'b',
  'c'
])

因为 computed 这个计算属性接收的是一个对象,所以由上面的示例代码可以看出,mapState 函数返回的是一个对象,现在如果想要和局部的计算属性混合使用的话,可以使用 ES6 的语法这样写来大大简化:

computed: {
  localComputed () { 
    ...
  },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

了解了 mapState 辅助函数后,接下来的几个辅助函数的用法也基本上都差不多了,我们继续往下看。

mapGetters

这个和 mapState 基本上没啥区别,简单看下官方的例子,就懂了:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

取个别名,那就用对象的形式,以下示例的意思就是把 this.doneCount 映射为 this.$store.getters.doneTodosCount

mapGetters({
  doneCount: 'doneTodosCount'
})

mapMutations

直接看示例代码:

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 将 `this.increment()` 映射为 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations` 也支持载荷:
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // 将 `this.add()` 映射为 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

简直不要太好用,连载荷也可以直接支持。

mapActions

mapMutations 用法一模一样,换个名字即可。

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // 将 `this.increment()` 映射为 
      // `this.$store. dispatch('increment')`
      'increment', 
      // `mapActions` 也支持载荷:
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store. dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      // 将 `this.add()` 映射为 
      // `this.$store. dispatch('increment')`
      add: 'increment' 
    })
  }
}

想要在组件中调用,直接this.xxx 就完了。

写在最后

不得不说,Vuex 在使用体验上面真的是用心良苦,用好这些辅助函数,将会大大增加我们的开发效率,当然,有任何问题,欢迎留言,咱们一起交流。

转载声明

作者:大宏说
链接:https://www.jianshu.com/p/c9b8bbaca875

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发,关注“胡哥有话说”,学习前端不迷路。推荐给更多小伙伴呦,欢迎多多留言交流…

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

1人推荐
随时随地看视频
慕课网APP