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>