Syntactic sugar for mapState and mapGetters

The mapState and mapGetters in vuex are auxiliary functions, which are actually a syntactic sugar of vuex, making the code more concise and elegant.

<script>
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
	}
}
</script>

mapState and mapGetters can only be used in computed. When used with normal computed functions, you need to use the spread operator, and then put the name of the corresponding state or getters in the array of mapState or mapGetters.