手把手教你怎么使用Vuex系列一

来看一下官方的定义：

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

在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。

Vuex采用和Redux类似的单向数据流的方式来管理数据：
用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。
如下图所示：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

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

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Mutations
更改Vuex的store中的状态的唯一方法是提交mutation。它本质就是用来处理数据的函数。

我们先使用vue-cli创建一个基于webpack的项目。

vue init webpack vuex-step-demo
# 安装依赖
...
...
cd vuex-step-demo
npm install
npm run dev

访问 localhost:8080，会显示如下的页面:

概念性的文字说的太多容易晕，下一篇我会一步一步的详细给大家讲解怎么使用Vuex去开发一个简单的计数器。