vuex中action异步操作/getter计算状态

责编:menVScode 2017-12-16 23:25 阅读(1715)

/store/index.js

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

Vue.use(Vuex)

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

export default store

        参数context是一个对象,但不是当前的store实例,context对象包含了当前实例的一些方法。打印context结果如下:

Object {
    commit: boundCommit(type, payload, options) //提交mutation
    dispatch: boundDispatch(type, payload) // 可以触发另一个异步操作(ajax操作)
    getters: Object
    rootGetters: Object
    rootState: Object
    state: Object
    __proto__: Object
}

        context.dispatch('testAction',{}):触发另一个action

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

        参数context是一个对象,可以利用es6解构赋值来传递参数。

actions:{
    addAction({commit,dispatch}){//参数:对象,不是当前的store实例,context对象包含了当前实例的一些方法
        console.log(context)
        setTimeout(()=>{ //模拟异步操作
            //改变状态,必须提交mutation
            commit('addNum',{n:3})
            dispatch('testAction',{test:1})
        },1000)
    },
    testAction(context,obj){
        console.log(obj)
    }
}


        需求:下图中点击+按钮时,红色数字可以一直不停的加,但是蓝色数字超过120的时候就不能继续加了。

QQ截图20171216231018

        可通过vuex中getters来实现,类似于计算属性 computed。

        /store/index.js:通过getters:{ }

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

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100
    },
    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:通过 this.$store.getters.filterCount 来获取值。

<template>
    <div>
        <h2>加减</h2>
        <button @click="addHandle">+</button>
        <span>{{num}}</span>
        <button @click="minusHandle">-</button>
        <p>{{ num2 }}</p>
    </div>
</template>
<script>
    export default{
        computed:{
            num(){
                return this.$store.state.count
            },
            num2(){
                return this.$store.getters.filterCount
            }
        },
        methods:{
            addHandle(){
                //改变状态,只需提交mutation中的addNum
                //this.$store.commit('addNum',3)

                //触发一个action
                this.$store.dispatch('addAction')
            },
            minusHandle(){
                this.$store.commit({
                    type:'minusNum',
                    min:5
                })
            }
        }
    }
</script>     
标签: action getter vuex
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码