vuex辅助函数mapState/mapAction/mapMutations/mapGetters

责编:menVScode 2017-12-17 15:14 阅读(2149)

        Vuex辅助函数:mapState、mapGetters、mapMutations、mapActions。

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

        mapState调用完之后是返回一个对象;

        写法1:箭头函数接受vuex里面state状态作为参数

computed:mapState({
    num:state => state.count
})

        写法2:直接写状态的key值

computed:mapState({
    num:'count'
})

        写法3:函数

computed:mapState({
    num(state){
        return state.count+2
    }
})

        写法4:接受数组,可以放多个key

computed:mapState(['count','name'])

        写法5:...扩展运算符

computed:{
    abc(){
        return 122
    },
    //...mapState(['count','name'])
    ...mapState({
        name:state => state.name,
        count:'count'
    })
}


        mapGetters:语法跟mapState一样

computed:{
    abc(){
        return 122
    },
    //...mapState(['count','name'])
    ...mapState({
        name:state => state.name,
        count:'count'
    }),
    ...mapGetters({
        num2:'filterCount'
    })
}


        mapActions({}):key值是点击按钮触发的那个事件

methods:{
    /*addHandle(){
        //改变状态,只需提交mutation中的addNum
        //this.$store.commit('addNum',3)

        //触发一个action
        this.$store.dispatch('addAction')
    },*/
    ...mapActions({
        addHandle:'addAction'
    }),
    minusHandle(){
        this.$store.commit({
            type:'minusNum',
            min:5
        })
    }
}


        mapMutations({}):传参方式,参数写在点击事件上。

methods:{
    ...mapActions({
        addHandle:'addAction'
    }),
    /*minusHandle(){
        this.$store.commit({
            type:'minusNum',
            min:5
        })
    }*/
    ...mapMutations({
        minusHandle:'minusNum'
        //传参方式:<button @click="minusHandle({min:5})">-</button>
    })
}

    

    相关代码

    /store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100,
        name:'menvscode.com'
    },
    getters:{
        filterCount(state){
            return state.count>=120 ? 120 : state.count
        }
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        addNum(state,payload){
            state.count +=payload.n
        },
        minusNum(state,payload){
            state.count -= payload.min
        }
    },
    actions:{
        addAction({commit,dispatch}){//参数:对象,不是当前的store实例,context对象包含了当前实例的一些方法
            //console.log(context)
            setTimeout(()=>{ //模拟异步操作
                //改变状态,必须提交mutation
                commit('addNum',{n:5})
                dispatch('testAction',{test:1})
            },1000)
        },
        testAction(context,obj){
            console.log(obj)
        }
    }
})

export default store

         /src/components/Increment.vue

<template>
    <div>
        <h2>加减</h2>
        <button @click="addHandle">+</button>
        <span>{{count}}</span>
        <button @click="minusHandle({min:5})">-</button>
        <p>{{num2}}</p>
        <p>{{name}}</p>
    </div>
</template>
<script>
    // import VUex from 'vuex'
    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    
    export default{
        //computed:mapState({
            //num:state => state.count
            //num:'count'
            /*num(state){
                return state.count+2
            }*/
        //}),
        // computed:mapState(['count','name']),
        computed:{
            abc(){
                return 122
            },
            //...mapState(['count','name'])
            ...mapState({
                name:state => state.name,
                count:'count'
            }),
            ...mapGetters({
                num2:'filterCount'
            })
        },
        methods:{
            ...mapActions({
                addHandle:'addAction'
            }),
            /*minusHandle(){
                this.$store.commit({
                    type:'minusNum',
                    min:5
                })
            }*/
            ...mapMutations({
                minusHandle:'minusNum'
                //传参方式:<button @click="minusHandle({min:5})">-</button>
            })
        }
    }
</script>     
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码