Vuex的学习笔记二：核心概念State和Mutation的理解和使用

一些组件如果想用到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 调用。

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

<button @click = “addCount”>

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。