当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState
辅助函数帮助我们生成计算属性。
官方文档中的说明:
mapState
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
为组件创建计算属性以返回 Vuex store 中的状态。详细介绍
第一个参数是可选的,可以是一个命名空间字符串。详细介绍
对象形式的第二个参数的成员可以是一个函数。function(state: any)
import { mapState } from 'vuex' export default { computed: mapState({ count: state => state.count, countAlias: 'count', countPlusLocalState (state) { return state.count + this.localCount } }) }
|
mapState
函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符(现处于 ECMASCript 提案 stage-4 阶段),我们可以极大地简化写法:
computed: { localComputed () { }, ...mapState({ }) }
|
mapMutations/mapActions只是把mutation/action函数绑定到methods里面,调里面的方法时正常传参数。