mapState使用

标签：computed   OLE   ret   and   ons   hand   code   imp   status   

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

mapState使用

标签：computed   OLE   ret   and   ons   hand   code   imp   status   

原文地址：https://www.cnblogs.com/my466879168/p/12236766.html