vue笔记：总结一下vuex，以后面试看下

最近又复习了下vuex，还是因为自己太菜了，最近在想mutations和actions，这样分同步和异步目的是什么？之前学了感觉没啥，现在又有点疑问，所以又总结了一下，后面有新想法再回来改哈哈…

从vuex原理复习：
先看图：

Vuex为Vue Components建立起了一个完整的生态圈,是一个状态管理器。

核心流程：

① Vue Components 是我们的 vue 组件，组件会触发（dispatch）一些事件或动作，也就是图中的 Actions；

② 我们在组件中发出的动作，肯定是想获取或者改变数据的，但是在 vuex 中，数据是集中管理的，我们不能直接去更改数据，所以会把这个动作提交（Commit）到 Mutations 中；

③ 然后 Mutations 就去改变（Mutate）State 中的数据；

④ 当 State 中的数据被改变之后，就会重新渲染（Render）到 Vue Components 中去，组件展示更新后的数据，完成一个流程。

各模块在核心流程中的主要功能：

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。

dispatch：操作行为触发方法，是唯一能执行action的方法。

actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。

state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

注意点：

1.vuex数据在组件使用时，放在data里面不会动态响应，用计算属性computed就会动态响应

2.关于actions和mutations问题
mutations负责对state数据修改，执行同步操作， 组件或者actions通过commit（‘方法名’，参数）提交 调用mutation方法
mutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象

action负责业务处理，执行异步操作， 不直接修改state，通过调用mutaions方法修改，组件通过this.$store.dispatch(‘方法名’, 参数)调用

action 也有一个固有参数 context，但是 context 是 state 的父级，包含 state、getter，commit, dispath…

那么为什么要分一个同步一个异步？
1.首先matations也可以执行异步操作，并不是只能写同步代码的，写了也没有报错（$watch严格模式下会报错），只是我们需要一个规范，就是mutation只写同步，负责state数据更改
2.actions 可以写很多业务处理，管理异步操作，涉及到数据更改调用mutations方法就好

比如我们需求是两个异步操作，B操作建立在A操作下, 比如B需要拿到A操作后的数据a， 然后进行判断 if(a&&b){ … }
这时候我们一般用promise解决，然后then获取结果，这时候在actions写promise操作，组件调用then获取结果就行

3.所以，这是一种约定俗成的规范吧

还是不太理解的看下这个
https://blog.csdn.net/dkr380205984/article/details/82347910