Vuex小白理解

vuex包括：

1.state :::::::存储状态
2.mutation 用store.commit来改变state的存储状态
3.action :::::actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）
4.getters :::相当于state的计算属性
5.modules 派生出自己的模块 使用时候根据不同的小仓库来调用

创建原因：

其实无论是vue还是react其实还是提倡单向数据流去管理状态，vue为UI控件提供了双向数据绑定的方式，在一些需要实时反应用户输入的场合会非常方便。
虽然vue和react框架本身有自己状态管理，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

(1)多个视图依赖于同一状态
(2)来自不同视图的行为需要变更同一状态

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

完美解决方式：将需要监听、改变的状态抽离出来

实现效果：
1.单向数据流：所有状态的改变可记录、可跟踪，源头易追溯;
2.所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
3. 一旦数据变化，就去更新页面(data->页面)，但是没有(页面->data);
4.如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中；

实现方法：：

Vuex的设计思想借助了 Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

挂载： 利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。

双向数据更新： Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中；Vuex的getters则是借助vue的计算属性computed实现数据实时监听

总结：

小项目 离得不远 改动较小 用组件中传值方法即可
大项目 离得较远嵌套较深 Vuex

尤大神万岁

tips：
单向数据流：view=》state=》action形成闭环
双向数据流：单向数据流+视图和数据的双向访问