getters的使用

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2.在store.js中追加getters配置

......
const getters={
    bigSum(state){
        return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.store({
    ......
    getters
})

3.组件中读取数据： $store.getters.bigSum

四个map方法的使用

1.mapState方法：用于帮助我们映射state中的数据为计算属性

import {mapState} from 'vuex'
//组件页面
computed:{
//借助mapState生成计算属性，sum、school（对象写法）
    ...mapState({sum:"sum",school:"school"}),
    
//借助mapState生成计算属性，sum、school（数组写法） 
    ...mapState([sum,school]}),
}

2.mapGetters方法：用于帮助我们映射getter中的数据为计算属性

//组件页面
computed:{
//借助mapGetters生成计算属性，bigSum（对象写法）
    ...mapGetters({bigSum:"bigSum"}),
    
//借助mapGetters生成计算属性，bigSum（数组写法） 
    ...mapGetters([bigSum]}),
}

2.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

//组件页面

<button @click='incrementOdd(value)'>加</button>
<button @click='incrementWait(value)'>减</button>
......

data(){
    return{
        value:1
    }
}
methods:{
    //靠mapActions生成，incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementOdd' })

    //靠mapActions生成，incrementOdd、incrementWait(数组形式)
    ...mapActions(['incrementOdd','incrementOdd'])
 }

2.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

//组件页面

<button @click='incrementOdd(value)'>加</button>
<button @click='incrementWait(value)'>减</button>
......

data(){
    return{
        value:1
    }
}
methods:{
    //靠mapMutations生成，incrementOdd、incrementWait(对象形式)
    ...mapMutations({incrementOdd:'incrementOdd',incrementWait:'incrementOdd' })

    //靠mapMutations生成，incrementOdd、incrementWait(数组形式)
    ...mapMutations(['incrementOdd','incrementOdd'])
 }

备注：mapActions与mapMutations使用时，若要传参需要在模板中绑定事件时传递好参数，否则参数是事件对象