mapState使用

Posted 2021-03-13 my466879168

mapState作用：可以辅助获得多个state的值
vuex中state中的数据在使用的时候，一般都是在computed中定义的，以为在data中定义的话是一次性的，不会随着vuex中数据变化而变化，虽然可以通过watch监听，但是很麻烦,如下:

computed:{
    a(){
        return this.$store.state.menuStatus
    }
}

watch:{
    '$store.state.menuStatus':{
        handler(newVal,oldVal){
            console.log(newVal)
        }
    }
}

这样写还是比较麻烦的，可以使用mapState辅助函数

import {mapState} from 'vuex'

computed:mapState({
    //第一种写法
    menuStatus：'menuStatus'
    //第二种写法
    menuStatus:(state)=>state.menuStatus
    //计算属性中的普通函数
    fn(){return ...

更简洁的写法就是...mapState

//在计算属性中
computed:{
    ...mapState([
        //必须带引号
        'menuStatus'
    ])
}