使用vuex实现增加、减少

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.效果

标签：count,实现,state,step,context,commit,setTimeout,vuex,减少
来源： https://blog.csdn.net/m0_50632711/article/details/119321280