阅读Vuex官方文档，Vuex官方文档
**Vuex是什么** Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
什么是“状态管理模式”？
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的极简示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
什么情况下我应该使用 Vuex？
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
开始
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
最简单的 Store
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit('increment')
console.log(store.state.count) // -> 1
再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
<div id="app">
<p>{{ count }}</p>//此处的count就是Vue实例中的count计算属性
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
// make sure to call Vue.use(Vuex) if using a module system
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment') //监听的v-on事件，进行触发， 然后穿到mutation中
},
decrement () {
store.commit('decrement')
}
}
})
State
单一状态树
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。
在 Vue 组件中获得 Vuex 状态
那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
import { mapState } from ‘vuex’
export default {
// …
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
大白话讲解Vuex 官方是这么说的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
不懂？呵呵，没关系。我是这么认为的：Vuex 就是前端为了方便数据的操作而建立的一个” 前端数据库“。且听下文分解。。。
模块间是不共享作用域的，那么B 模块想要拿到 A 模块的数据，我们会怎么做？不要去想什么”状态管理“、”vuex“、”redux“、”函数式编程“什么的。。。
我们会定义一个全局变量，叫 aaa 吧，就是 window.aaa。然后把A 模块要共享的数据作为属性挂到 B 模块上。这样我们在 B 模块中通过 window.aaa 就可以拿到这个数据了。
但是问题来了，B 模块拿到了共享的数据，就叫他 xxx 吧？得了，名字太混乱了，咱先给它们都改下名字。那个全局变量既然是存东西的，就叫 store 吧，共享的数据就叫 state 吧，你叫他 data 也一样，反正我是叫它 state 了。
继续说我们的问题，问题是什么呢？B 模块拿到了 A 模块的数据 state，但是这个数据不是一成不变的呀，A 要操作这个数据的。那么我们是不是要在这个数据——state 改变的时候通知一下 B？那写个自定义事件吧。。。
好吧，你自己已经实现了一个迷你版的 vuex，其实 vuex 就帮你做了这点事儿。我们来看下它里面都有什么玩意儿。
这就是一个典型的 使用vuex生成的仓库。不懂？呵呵，没关系，也没打算说它。我们聊点别的。
后端是干什么的？进行数据库操作，处理请求，根据请求分发响应。我们就聊聊数据库的操作，不说 API。首先，你得能取吧？那么得有一套取数据的 API，我们给他们集中起个名字吧？既然是获取，那就叫getter 吧。我们还得存数据呀，是吧。存数据就是对数据库的修改，这些 API，我们也得给它起个名字，就叫 mutation，就这么定了。
OK，vuex 生成的仓库也就这么出来了，所以我说 vuex 就是” 前端的数据库“。State 就是数据库。Mutations 就是我们把数据存入数据库的 API，用来修改 state 的。getters 是我们从数据库里取数据的 API，既然是取，那么你肯定不能把数据库给改了吧？所以 getters 得是一个”纯函数“，就是不会对原数据造成影响的函数，比如 数组的concat（）方法、slice（）方法；与之对应的是数组的 push（）方法、splice（）方法，他们会改变原数组的值。然后我们把这几部分用 store 包一下，” vuex “就捣置出来了，用数据了就从 state 中取，改数据了记得 mutation 到 state 中。
哎，还漏了个 actions 呢。你想呀，后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中。其实这就是 action的过程。当然你也可以不做处理，直接丢到数据库，所以vuex也可以在 action 中直接存，就是直接mutation。
现在，我们再来看看 vuex 的数据流。后（qian）端通过 action处理数据，然后通过 mutation 把处理后的数据放入数据库（state）中，谁要用就通过 getter从数据库（state）中取。
你都理解了？好吧，有卵用，还得回归到 API 上。
Vuex 什么时候用？
果你问了这个问题，说明你不该用。但这个问题可以很容易并且很正确的回答。
等你痛了的时候，你就该用了。如果你连自己的代码都看不懂的时候，如果你自己都搞不清楚值在组件中是怎么传递的时候，如果你自己代码写了一半，恶心的想要撂挑子不干的时候，赶紧的，Vue.use（Vuex）!