vuex异步操作-action

责编:menVScode 2017-12-16 22:39 阅读(2386)

        如果点击按钮不是直接改变store中的状态,而是完成其他操作后再来改变,这时候会出现一个问题。

        /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,n){
            setTimeout(()=>{ //模拟异步操作
                state.count +=n
            },1000)
        },
        minusNum(state,payload){
            state.count -= payload.min
        }
    }
})
export default store

        初始化状态

QQ截图20171216213837

        慢慢点击+按钮,观察页面中的数字和控制台中的数字。

GIF11111

       快速点击+按钮,观察页面中的数字和控制台中的数字。

GIF2222

        两个不同点击方式有一个共同的现象:页面中数字跟控制台数字没有统一。当点击一下+按钮就通过 mutation 改变状态,在vuex中有一个原则:在提交mutation的时候必须是同步的

        当一提交mutation,控制台Base State中必定有一条记录,不做异步操作。但是要包含异步操作的话,需要使用 action。

        Action:包含异步操作、提交mutation改变状态。

        修改后/store/index.js

        actions中通过 context.commit('addNum',{}) 来提交mutation

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实例
            setTimeout(()=>{ //模拟异步操作
                //改变状态,必须提交mutation
                context.commit('addNum',{n:3})
            },1000)
        }
    }
})

export default store

        修改后 /src/components/Increment.vue

        通过 this.$store.dispatch('addAction') 来触发一个action

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

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

        与本文action相关的文章(必看):http://menvscode.com/detail/5a353b05a7833e528ca883de

标签: action vuex
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码