Vuex系列之（五）求和案例

求和案例

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const actions = {
	// 对于不包含业务逻辑也不进行Ajax请求转发的操作可以不经过actions，直接调用mutations中的方法即可
	// jia(context,value){
	// 	console.log('actions被调用了',context,value)
	// 	context.commit('JIA',value)
	// },
	// jian(context,value){
	// 	context.commit('JIAN',value)
	// },
	
	// context：上下文对象，函数中缺啥就来这找
	// value：操作的值
	conditionAdd(context,value){
		if(context.state.sumNumber % 2){
			context.commit('JIA',value)
		}
	},
	addLater(context,value){
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}

// mutations中的key常为大写，用于区分actions中的key，同时，mutations还是真正操作数据的，所以以大写表示
// 如果key由多个单词组成，多个单词之间通过‘_’连接
const mutations = {
	// state：真正的state
	// value：操作的值
	JIA(state,value){
		state.sumNumber = value + state.sumNumber
	},
	JIAN(state,value){
		state.sumNumber = state.sumNumber - value
	}
}

// state中监测数据变化的原理同Vue
const state = {
	// 将共享数据交给state保管
	sumNumber: 0
}

export default new Vuex.Store({
	actions,
	mutations,
	state
})

<!-- Count组件 -->
<template>
	<div>
		<!-- 模板中获取state中的数据 -->
		<h1>当前求和为：{{$store.state.sumNumber}}</h1>
		<div>
			<select v-model="selectedNumber">
				<option :value="1">1</option>
				<option :value="2">2</option>
				<option :value="3">3</option>
			</select>
			<button type="button" @click="addition">+</button>
			<button type="button" @click="subscribe">-</button>
			<button type="button" @click="conditionAdd">当前和为奇数再加</button>
			<button type="button" @click="addLater">等一等再加</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Count',
		data(){
			return {
				selectedNumber: 0,
			}
		},
		methods:{
			addition(){
				this.$store.commit('JIA',this.selectedNumber)
				// this.$store.dispatch('jia',this.selectedNumber)
			},
			subscribe(){
				// 如果没有业务逻辑相关的操作，而且也不会发送Ajax请求，直接调用commit即可
				this.$store.commit('JIAN',this.selectedNumber)
				// this.$store.dispatch('jian',this.selectedNumber)
			},
			conditionAdd(){
				this.$store.dispatch('conditionAdd',this.selectedNumber)
			},
			addLater(){
				this.$store.dispatch('addLater',this.selectedNumber)
			}
		}
	}
</script>