vue vuex 学习小demo

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