Vuex mapState和mapGetters

一、作用

生成计算属性，简化模版{{xx}}xx的写法，原因xx在vuex中写法麻烦$store.state.x或$store.getters.x

二、步骤

1、引入

import {mapState, mapGetters} from 'vuex'

2、语法

computed:{
    // 借助 mapState 生成计算属性 name sum 对象写法
    // ...mapState({name:"name", sum:"sum"}),
    
    // 借助 mapState 生成计算属性 name sum 数组写法
    ...mapState(['name', 'sum']),

    // 借助maspGetters 生成计算属性 bigSum 对象写法
    // ...mapGetters({bigSum:"bigSum"}),

    // 借助maspGetters 生成计算属性 bigSum 数组写法
    ...mapGetters(["bigSum"])
},

3、使用

<h2>当前求和为：{{ sum }}</h2>
<h2>计算求和为：{{ bigSum}}</h2>
<h2>姓名：{{name}}</h2>