侧边栏壁纸
博主头像
M酷博主等级

祝君一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 40 篇文章
  • 累计创建 36 个标签
  • 累计收到 240 条评论

目 录CONTENT

文章目录

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

M酷
2021-03-10 / 0 评论 / 0 点赞 / 574 阅读 / 999 字 / 正在检测是否收录...

背景

在我们使用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

0
广告 广告

评论区