vuex辅助函数mapState、mapGetters、mapMutations、mapActions

背景

在我们使用vuex做状态管理的时候，经常会需要去读取或者修改vuex中的值，如果我们每次都用普通方法去操作，当涉及的操作比较多的时候，就会多写很多代码，如下：

普通用法：

export default {
    computed: {
        test: () => this.$store.getters.getSome
    }
}

使用辅助函数：

自定义属性、方法名

import { mapGetters, mapState } from 'vuex'
export default {
    computed: {
        ...mapGetters({
            'test': 'getSome'
        }),
        ...mapState({
            'some': state => state.some
        })
    },
    methods:{
       ...mapMutations('saveSome')
    }
}

使用辅助函数简化代码

可以看到使用map辅助函数会更加高效，如果我们不需要自定义字段名的，并且所有数据都在全局没使用命名空间的话，还可以简写如下：

在保证属性、方法名全局唯一性的前提下可以使用数组方式

import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'
export default {
    computed: {
        ...mapGetters(['getSome']),
        ...mapState(['some']),
        ...mapMutations(['saveSome']),
        ...mapActions(['doSome'])
    }
}

参考

弄懂mapState、mapGetters、mapMutations、mapActions