上一篇中我们对vuex做出了一些基本的了解——包括它的基础概念、基础使用方法及技术使用场景,有兴趣的彦祖可以移步浅谈vuex(一)了解,本次我们来讲讲vuex的进阶一些的用法——辅助函数。
这里我们还是先抛出问题:1.什么是辅助函数? 2.辅助函数的作用是什么?
一、辅助函数的定义与作用。
在Vuex中,mapState, mapGetters, mapMutations 和 mapActions 这些辅助函数就是语法糖。即辅助函数可以以更简洁、更容易读懂的方式来帮助我们使用vuex中的状态和方法。
vuex辅助函数有四个mapState、mapMutations、 mapActions、 mapGetters.
假如我们在vuex的store中定义了一些状态:
const state = {
userInfo: {},
roles: [],
loginFlag: '',
permission: []
}
我们在组件中需要用到他们的时候就需要这样:
computed: {
userInfo() {
return this.$store.state.userInfo
},
roles() {
return this.$store.state.roles
},
loginFlag() {
return this.$store.state.loginFlag
},
permission() {
return this.$store.state.permission
},
}
这样用并没有问题,但是有聪明的彦祖就会想到:那我这个组件要用100个vuex中的状态怎么办?如果都这样列举出来岂不是非常不简洁且麻烦?于是就出现了辅助函数。
二、辅助函数的引入与使用
辅助函数的引入与使用其实都很简单。
当我们需要在组件中使用辅助函数时,我们可以直接这样引入:
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
使用如下:
1.mapState 辅助函数
mapState是vuex中状态State对应的辅助函数,如我们上述的例子中那样定义好状态后:
// store/index.js
const state = {
userInfo: {},
roles: [],
loginFlag: 'test',
permission: []
}
在组件中:
// 先引入辅助函数
import { mapState } from 'vuex'
// 使用扩展运算符 ... 将这个对象的属性展开到组件的 computed 选项中。
export default {
computed: {
...mapState([
'userInfo',
'roles',
'loginFlag',
'permission'
])
}
}
这样就可以在组件中通过 this.userInfo
、this.roles
、this.loginFlag
和 this.permission
来访问这些状态了。 试想如果有100个或更多状态,这样写是否就使代码简洁了很多!
2.mapGetters 辅助函数
官网上的例子很好,我就抄一下官网的哈:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 这里我加一个不用辅助函数的使用方法来做对比
doneTodosCount() {
return this.$store.getters.doneTodosCount
},
anotherGetter() {
return this.$store.getters.anotherGetter
},
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想给它改个名字:
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
这样你就可以在组件中通过this.doneCount来访问到store/index中的getters中的doneTodosCount了。
3.mapMutations 辅助函数
mapMutations是vuex中状态的唯一方法mutation对应的辅助函数,相对于在组件中多次使用this.$store.commit('xxx') 来提交方法,我相信各位彦祖肯定更喜欢看起来更有技术含量且更简洁的mapMutations:
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
其上的 add: 'increment' 如同getters一样也是改名的方法。
4.mapActions 辅助函数
在组件中可以使用 this.$store.dispatch('xxx')
分发 action,也可使用 mapActions
辅助函数来将Action映射为方法来使用:
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
三、总结
总结一下使用辅助函数需要注意的点:
1.使用前不要忘了先在vuex中引入对应的辅助函数。
2. mapState、mapGetters一般映射于组件的computed中; mapMutations、mapActions一般映射于组件的methods中。
3.可以根据组件对vuex中状态和方法的实际引入量选择是否使用辅助函数。
以上即为辅助函数使用的全部内容,如果各位彦祖亦菲有兴趣,我们还可以再深入的讲讲vuex的进阶使用。(其中部分演示代码来源于官网,如有侵权请联系我。)