Vuex的getters、mapGetters、mapState

目录

相关文章

Vuex的使用

getters的使用

getters的配置如下，需要定义一个对象，对象中包含着函数，函数具有返回值，然后在创建Vuex.Store的时候传入定义的getters

//准备state用于存储数据
const state = {
    sum:0
}
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    ...省略部分代码
    state,
    //传入定义的getters
    getters
})

使用如下

<template>
    <div>
        <h1>当前大和为{{$store.getters.bigSum}}</h1>
    </div>
</template>

mapGetters的使用

mapGetters其实就是一个映射，将getters中的数据映射到计算属性中，如下，其中mapGetters会根据getter中配置的bigSum生成一个名为bigSum的计算属性

<template>
    <div>
        <h1>当前大和为{{bigSum}}</h1>
    </div>
</template>
<script>
    import {mapGetters} from "vuex"
    export default{
        computed:{
            //...会将对象展开加入到computed中
            ...mapGetters({bigSum:'bigSum'})
        },
    }
</script>

这里我们也可以使用简写形式,也就是把映射中对象形式的配置，改为数组形式

<template>
    <div>
        <h1>当前大和为{{bigSum}}</h1>
    </div>
</template>
<script>
    import {mapGetters} from "vuex"
    export default{
        computed:{
            //...会将对象展开加入到computed中
            ...mapGetters(['bigSum'])
        },
    }
</script>

mapState的使用

mapState是将state中的数据进行映射，mapState的使用与mapGetters相似，使用如下

<template>
    <div>
        <h1>当前和为：{{sum}}</h1>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    export default{
        computed:{
            ...mapState(['sum']),
        }
    }
</script>

mapActions的使用

mapActions的使用与上面的类似，不过mapActions是配置在methods中

<template>
    <div>
        <h1>当前和为：{{sum}}</h1>
        <h1>当前大和为{{bigSum}}</h1>
        <button @click="jia(1)">加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapActions} from "vuex"
    export default{
        computed:{
            ...mapState(['sum']),
            ...mapGetters({bigSum:'bigSum'})
        },
        methods:{
            ...mapActions(['jia'])
        }
    }
</script>

并且配置的名字要与store->index.js中actions里函数的名字一致

//准备actions用于响应组件中的动作
const actions = {
    jia(ctx,value){
        //交给mutations处理
        ctx.commit("JIA",value)
    }
}

mapMutations的使用

与mapActions几乎一样，mapMutations配置的函数可以直接调用mutations配置的函数，使用方法如下：

<template>
    <div>
        <h1>当前和为：{{sum}}</h1>
        <h1>当前大和为{{bigSum}}</h1>
        <button @click="JIA(1)">加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapActions,mapMutations} from "vuex"
    export default{
        computed:{
            ...mapState(['sum']),
            ...mapGetters({bigSum:'bigSum'})
        },
        methods:{
            ...mapActions(['jia']),
            ...mapMutations(['JIA'])
        }
    }
</script>

并且配置的名字要与store->index.js中mutations里函数的名字一致

//准备mutations用于操作数据
const mutations = {
    JIA(state,value){
        //操作数据
        state.sum += value
    }
}