Vuex的全面解析

• vuex 是为了解决整个网站状态数据共享问题的,虽然有父向子,子向父等数据传递,但在网站开发过程中一些无直接关联关系的组件也需要共享相同的数据时,就需要使用 vuex 
• vuex 中有五个主要的成员:
• state 是用来存储数据的
• mutations 是用来修改 state 中的数据的方法
• actions 是用来处理一些异步操作数据的行为方法
• getters 有点类似计算属性,是对 state 中的数据做了一些处理
• modules 是用来对复杂业务分模块的,每个模块也可以有 state,mutaions,actions,getters

vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex 的出现解决了：

1.多个组件共享状态时，单向数据流的简洁性很容易被破坏： 2.多个视图依赖于同一状态。 3.来自不同视图的行为需要变更同一状态。

Vuex 的数据传递流程

当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的方法。actions 里面的每个方法中都会 有一个 commit 方法，当方法执行的时候 会通过 commit 来触发 mutations 里面的方法进行数据的修改。 mutations 里面 的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的 数据修改 ，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

Vuex 的 Mutation 和 Action 之间的区别

我们可以从以下三个方面对两者进行分析：

第一点 => 流程顺序

“相应视图--->修改 State”拆分成两部分，视图触发 Action，Action 再触发 Mutation。

第二点 => 角色定位

基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改 State，理论上是修改 State 的唯一途径。

Action：业务代码、异步请求。

第三点 => 限制

角色不同，二者有不同的限制。

Mutation：必须同步执行。

Action：可以异步，但不能直接操作 State。而且可以通过 action 来提交 mutations

持久化

vuex 是保存在内存中的，刷新之后就会丢失。

可以通过 vuex-presisit 插件来做持久化