2024年Web前端最全Vuex的学习笔记二：核心概念State和Mutation的理解和使用，web前端开发项目面试描述怎么写

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

• • 2.1Mutation的自我介绍

• 2.2组件通过触发Mutation来改变数据

• 2.3组件触发Mutation时传递参数

一.State

======================================================================

1.1State的自我介绍

---

State提供了唯一的数据公共源，所有共享的数据都要统一放到store的state进行存储；

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count:0, //在state中存储一个count数据

},

})

1.2组件访问State中数据的方式

---

一些组件如果想用到state中的数据怎么办（也就是读取state中的数据），不要急，它给我们提供了以下两种方法：

第一种方式：$store.state.数据名

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 (computed)中返回某个状态：

从state中拿到的{{conut}}

从state中拿到的{{$store.state.count}}

第二种方式：mapState 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

从state中拿到的{{conut}}

//从Vuex中按需导入mapState 函数

import { mapState } from ‘vuex’

1.3组件通过哪些方式改变State中数据

---

只有通过Mutation才能变更Store的数据，请仔细阅读下面Mutation的详细介绍；

二.Mutation

=========================================================================

2.1Mutation的自我介绍

---

1. 只有通过Mutation才能变更Store的数据，不能直接在组件中操作Store的数据；

2. 在Mutation统一操作Store的数据虽然比较繁琐，但是便于集中监控所有数据的变化；

3. 一条重要的原则就是要记住 mutation 必须是同步函数，一些异步函数我们要放到后面讲的action中处理；（为什么呢？大家可以看一下官网，有详细介绍。）

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count:0, //在state中存储一个count数据

},

mutations: {

add(state){

//变更state中的count数据

state.count++

}

}，

})

2.2组件通过触发Mutation来改变数据

---

你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

ore.commit 调用。

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

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

[外链图片转存中…(img-xFzDXGL5-1715380934684)]

[外链图片转存中…(img-ksrPhpnd-1715380934685)]