mapState使用

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'
    ])
}

猜你喜欢

转载自www.cnblogs.com/my466879168/p/12236766.html