求和案例（Vuex版1.0）
- 将sum配置在index.js文件中的state中
- 在组件中绑定的方法中调用dispatch方法并传入参数
- 在index.js文件中actions中配置传入方法并调用commit方法
- 在mutations中写入业务逻辑实现功能
Count组件
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name: "Count",
data(){
return {
number:1,
}
},
methods:{
// 加法
increment(){
this.$store.commit('ADD',this.number)
},
// 减法
decrement(){
this.$store.commit('MINUS',this.number)
},
// 合为奇数加
incrementOdd(){
this.$store.dispatch('addOdd',this.number)
},
// 等一等再加
incrementWait(){
this.$store.dispatch('addWait',this.number)
},
},
})
</script>
<template>
<div class="count">
<!-- 组件中读取Vuex中的数据 -->
<h1>当前求和为：{{$store.state.sum}}</h1>
<select v-model.number="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
index.js文件
const actions = {
/* add(context, value) {
// contest 上下文对象
context.commit('ADD', value)
},
minus(context, value) {
context.commit('MINUS', value)
},
*/
addOdd(context, value) {
if (context.state.sum % 2) {
context.commit('ADD', value)
}
},
addWait(context, value) {
setTimeout(() => {
context.commit('ADD', value)
}, 500)
}
}
// 准备mutations，用于操作数据（state）
const mutations = {
ADD(state, value) {
state.sum += value
},
MINUS(state, value) {
state.sum -= value
},
}
//准备state，用于存储数据
const state = {
sum: 0,
}
- 由于actions中的add方法和minus方法无特殊业务逻辑，因此这两种方法可进行省略
- 在Count组件中此两种方法直接调用commit方法进行数据处理
