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)
  },
},