1.引入组件Addition.vue和Subtraction.vue
2.
3.在div中使用自定义组件
4.在store.js中
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
//变更状态,不要在mutations中执行异步操作(延迟)
state.count++
// setTimeout(()=>{
// state.count++
// },1000)
},
addN(state,step){
state.count += step
},
sub(state){
state.count–
},
subN(state,step){
state.count -= step
}
},
actions:{
addAsync(context){
setTimeout(()=>{
//在actions中,不能直接修改state中的数据
//必须通过context.commit()触发某个mutation才行
context.commit(‘add’)
},1000)
},
addNAsync(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
},
subAsync(context){
setTimeout(() => {
context.commit('sub')
}, 1000);
},
subNAsync(context,step){
setTimeout(()=>{
context.commit('subN',step)
},1000)
}
},
getters:{
showNum(state){
return '当前数量['+state.count+']'
}
}
})
5.addition.vue
6.
7.效果