如果点击按钮不是直接改变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
初始化状态
慢慢点击+按钮,观察页面中的数字和控制台中的数字。
快速点击+按钮,观察页面中的数字和控制台中的数字。
两个不同点击方式有一个共同的现象:页面中数字跟控制台数字没有统一。当点击一下+按钮就通过 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
本站在建设中引用了因特网上的一些资源并对有明确来源的注明了出处,版权归原作者及网站所有;
如果您对本站文章版权的归属存有异议,请您联系站长:third_king$163.com(将$换成@),我们会马上做出整改。
Copyright © menvscode.com All Rights Reserved. 浙ICP备16010139号-3