跟着文档学Vuex（一）：什么是Vuex

Vuex是什么？

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

什么是“状态管理模式”？

让我们从一个简单的Vue计数应用开始分析：

newVue({// statedata(){return{count:0}},// viewtemplate:`<div>{{count}}</div>`,// actionsmethods:{increment(){this.count++}}})

单向数据流

通过代码和图我们可以看到，data里是驱动应用的数据源（state），template是反应数据的视图窗口（View），method里的increment，响应view上用户的输入操作（Actions）

这三兄弟在一个组件内运行没问题，但是如果现在State，View，Actions同时出现在多个组件里，那样状态就会很混乱

多个视图（view）依赖同一个状态（state）。

来自不同的视图的行为（actions）需要改变同一个状态（state）。

对于问题一，传参的方法对于多层嵌套将会非常麻烦，并且兄弟之间的组件传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件变更和同步状态的多份拷贝。以上的模式都非常脆弱和难以维护。

因此，Vuex把组件的共享状态抽取出来，以一个全局单例模式管理。组建树构成了一个巨大的‘视图’，不管在树的哪个位置，任何组件都能获取状态或者出发行为。利用Vue.js的细粒度数据响应机制进行高效的状态更新。

什么情况下使用Vuex？

看完上面的介绍，你应该明白，Vuex的出现，就是一个统一的状态管理工具，如果你在项目中并没有太多的共享状态，那你可以不用，当你被共享的状态搞得焦头烂额时，那你一定要马上使用它。引用Redux的作者的话就是

Flux就像是眼睛：你自然会知道是什么时候需要它。

引用

https://vuex.vuejs.orgVuex官方文档