Web前端最全vue vuex 学习小demo(2)，2024年最新阿里、百度、美团、携程、蚂蚁面经分享

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

count:0,

name:“Winter Wang”

},

//方法 接收参数为state中的数据

mutations:{

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