mutation与vuex区别

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

如果点击按钮不是直接改变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>