2024年最全开局一张图，理解Vuex_一张图看懂vuex，大厂前端面试总结+详细解答

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

const store =new Vuex.Store({
//vuex的配置
});

new Vue({
el:'#app',
router:router,
//使用vuex
store:store,
render:h=>{
return h(App)
}
});

仓库store包含了应用的数据(状态)和操作过程，Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

来自store的数据只能读取($store)，不能手动改变，改变store中数据的唯一方法是显示的提交mutations。

提交mutations

const store =new Vuex.Store({
state:{
cunt:0;
},
mutations:{
increment(state){
state.count ++;
},
decrease(state){
state.count --;
}
}
});

执行mutations

通过this.$store.commit方法来执行mutations。在index.vue中添加按钮用于就加减。

在methods中执行mutations来改变store里的数据。

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

外链图片转存中…(img-6hrVErfO-1715681962981)]
[外链图片转存中…(img-4ByT173o-1715681962982)]