vuex状态管理

在我们迫不及待的开始项目之前，我们最好先花几分钟来了解下 Vuex 的核心概念。

什么是 Vuex?

Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想，但简化了概念，并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。

为什么需要它？

当你的应用还很简单的时候，你多半并不需要 Vuex。也不建议过早地使用 Vuex。但如果你正在构建一个中型以上规模的 SPA，你很有可能已经需要思考应该如何更好地归纳 Vue 之外，应用的其他组成部分。这就是 Vuex 要大显身手的时刻。
我们在单独使用 Vue.js 的时候，通常会把状态储存在组件的内部。也就是说，每一个组件都拥有当前应用状态的一部分，整个应用的状态是分散在各个角落的。然而我们经常会需要把状态的一部分共享给多个组件。一个常见的解决策略为：使用定制的事件系统，让一个组件把一些状态“发送”到其他组件中。这种模式的问题在于，大型组件树中的事件流会很快变得非常繁杂，并且调试时很难去找出究竟哪错了。
为了更好的解决在大型应用中状态的共用问题，我们需要对组件的 组件本地状态(component local state) 和 应用层级状态(application level state) 进行区分。应用级的状态不属于任何特定的组件，但每一个组件仍然可以监视(Observe)其变化从而响应式地更新 DOM。通过汇总应用的状态管理于一处，我们就不必到处传递事件。因为任何牵扯到一个以上组件的逻辑，都应该写在这里。此外，这样做也能让我们更容易地记录并观察状态的变更（Mutation，原意为突变），甚至可以实现出华丽如时光旅行一般的调试效果。（译注：是时候安利一波 vue-devtools 了）
————————————————————————————————————
Vuex 也对如何管理分撒各地的状态增加了一些约束，但仍保留有足够面对真实使用场景的灵活性。

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 官方图）

Paste_Image.png

简单解释下：

Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。

从左到又，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。

注意事项

数据流都是单向的
组件能够调用 action
action 用来派发 Mutation
只有 mutation 可以改变状态
store 是响应式的，无论 state 什么时候更新，组件都将同步更新

更新中。。。。。。