mapState与mapGetters语法糖

大家好，又见面了，我是你们的朋友全栈君。

vuex中的 mapState，mapGetters 属于辅助函数，其实就是vuex的一个语法糖，使代码更简洁更优雅。

import { 
    mapState, mapGetters } from "vuex"
export default { 
   
    computed: { 
   
    	//原先state中的数据
        templateInfo(){ 
   
        	return this.$store.state.templateInfo
        },
        //现在
        ...mapState([
            "templateInfo",   
        ]),
        //原先getters中的数据
        isPreview(){ 
   
        	return this.$store.getters.isPreview
        },
        //现在
        ...mapGetters([
            'isPreview'
        ])
    },
    created(){ 
   
     	//使用时
     	this.templateInfo,
     	this.isPreview
	}
}

mapState与mapGetters只能在computed中使用，与正常的computed中的函数一起使用时需要用扩展运算符，然后在mapState或mapGetters函数的数组中放入对应的state或getters中的名称。

1.若要使用某个模块中的state，则第一个参数是模块名称

...mapState("moduleA", { 
   
      test1: state => state.test1,
      test2: "test2"
 }),

2.若要使用多个模块中的state，以上方法有点太累赘，则用以下方法

...mapState({ 
   
      currentType: state => state.app.currentType,
      userId: state => state.user.userId,
}),

以上两种方法对getters同样有效。

3.通过state中的值再动态计算出getters中的值

const getters = { 
   
  alarmName: state => { 
   
    return (row) => state.app.alarmTypes.find(item => item.alarmType == row.alarmType)
  },
},