前言：在最近学习 Vue.js 的时候，看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章。感觉收获挺多，自己在它的例子的基础上进行了一些优化和自定义功能，在这里和大家分享下学习心得。
在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex。我们将大概的过一遍什么是 Vuex.js，在项目中什么时候使用它，和如何构建我们的 Vue 应用。
这里放一张我们项目的预览图片：
项目源码：vuex-notes-app；有需要的同学可以直接下载源码查看。
主要知识点
Vuex 状态管理机制的使用
Vue.js 的基础 api
Vue-cli 脚手架的安装及使用
vur-router 的使用
ES6 的语法，这里推荐看下阮一峰的入门教程
Vuex 概述
在我们迫不及待的开始项目之前，我们最好先花几分钟来了解下 Vuex 的核心概念。
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。
state 这样概念初次接触的时候可能会感觉到有点模糊，简单来说就是将 state 看成我们项目中使用的数据的集合。然后，Vuex 使得 组件本地状态（component local state）和 应用层级状态(application state) 有了一定的差异。
component local state：该状态表示仅仅在组件内部使用的状态，有点类似通过配置选项传入 Vue 组件内部的意思。
application level state：应用层级状态，表示同时被多个组件共享的状态层级。
假设有这样一个场景：我们有一个父组件，同时包含两个子组件。父组件可以很容易的通过使用 props 属性来向子组件传递数据。
但是问题来了，当我们的两个子组件如何和对方互相通信的？ 或者子组件如何传递数据给他父组件的？在我们的项目很小的时候，这个两个问题都不会太难，因为我们可以通过事件派发和监听来完成父组件和子组件的通信。
然而，随着我们项目的增长：
1、保持对所有的事件追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事件？
2、项目逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项目的维护。
3、父组件将变得和子组件耦合越来越严重，因为它需要明确的派发和监听子组件的某些事件。
这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是：
The state tree：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
Getters：用来从 store 获取 Vue 组件数据。
Mutators：事件处理器用来驱动状态的变化。
Actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations
如何你暂时还不太理解这个四个概念，不用着急，我们将在后面的项目实战中详细的解释。
下面这张图详细的解释了 Vuex 应用中数据的流向（Vuex 官方图）
简单解释下：
Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。
从左到又，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。
注意事项
数据流都是单向的
组件能够调用 action
action 用来派发 Mutation
只有 mutation 可以改变状态
store 是响应式的，无论 state 什么时候更新，组件都将同步更新
环境安装
这个应用将使用 webpack 来做模块打包，处理和热重启。使用 Vue 官方提供的脚手架 vue-cli。
安装 vue-cli
npm install -g vue-cli
注：Node.js >= 4.x, 5.x 最好
初始化应用
vue init webpack vue-notes-app cd vue-notes-app npm install // 安装依赖包 npm run dev // 启动服务