使用vuex实现增加、减少

1.引入组件Addition.vue和Subtraction.vue
使用vuex实现增加、减少
2.
使用vuex实现增加、减少
3.在div中使用自定义组件
使用vuex实现增加、减少
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

使用vuex实现增加、减少
6.
使用vuex实现增加、减少
7.效果
使用vuex实现增加、减少

上一篇:element的表单重置表单并用clearValidate消除校验


下一篇:浏览器 事件循环(Event Loop)