add(state){
state.count++
},
sub(state){
state.count–
},
addN(state,step){
state.count+=step
},
subN(state,step){
state.count-=step
}
},
//如果actions里面想要修改store里面的数据,只能通过commit去触发mutations里面的方法
//不能直接修改
//context.commit(‘add’)触发mutations里面的方法变成异步
actions:{
addAsync(context){
setTimeout(()=>{
context.commit(‘add’)
},2000)
},
subAsync(context,step){
setTimeout(()=>{
context.commit(‘subN’,step)
},2000)
},
},
//用于对store里面的数据进行加工处理形成新的数据
//store中的数据变化之后,getter包装中的数据也会跟着变化
//getters不会修改store里面的数据
getters:{
showNum:state=>{
return ${state.name}调用的是${state.count}
}
}
})
Add.vue 上半部分加的组件
//vuex中不允许组件直接修改store中的数据逻辑
//只能展示,逻辑在vuex中处理
//方便集中管理状态
当前最新count的值为:{{count}}
{{showNum}}
<button @click=“handleAdd”>+1
<button @click=“handleAddN”>+10
<button @click=“addAsync”>延时+1
Sub.vue组件
当前最新count的值为:{{count}}
<button @click=“handleSub”>-1
<button @click=“handleSubN”>延时-10