Vuex 是什么？
1.借鉴 了 Flux、Redux、The Elm Architecture 。
2.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
3.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
4.Vuex 也集成到 Vue 的官方调试工具。
5.一个 Vuex 应用的核心是 store（仓库，一个容器），store 包含着你的应用中大部分的状态(state)。
基础的使用步骤：
1、下载安装：npm install vuex --save
2、创建一个存储数据的仓库，为了方便管理我们可以在 src 目录下创建一个 store 目录，然后在里面创建数据仓库文件 index.js
3、我们需要将该数据仓库 import 到 main.js 中使关键字“store”成为全局能使用的 API
4、由于我们在 main.js 将 store 加载到了 new Vue 实例中，因此我们要在组件中调用数据仓库中存储的数据
数据流向图：
vuex store 实例
每一个 Vuex 应用的核心就是 store（仓库），这里存放了应用中的大部分状态 stage，操作状态的 mutations，触发 mutations 的 actions。
store 实例的生成
与生成 vue 实例一样，同样是调用一个构造函数 Vuex.Store,并传入一个 option 对象，从而生成一个 store 实例。这个实例包含了应用的状态，和改变应用状态的方法。
但是 store 实例尽管提供了改变状态的方法，它本身是不改变状态的。改变状态的源头来自组件和生命周期的钩子函数。 在组件中，使用计算属性来读取应用的状态，通过 action——>mutation——>state 来改变应用的 state。另外，并不是说应用的所有状态都应该放到 vuex 的 state 中，state 主要放用于共享的，或者应用级别的状态
1、State
vuex 中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state 来获取我们定义的数据
2.Getters
Getter 相当于 vue 中的 computed 计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义 vuex 的 Getter 来获取，Getters 可以用于监听、state 中的值的变化，返回计算后的结果
3.Mutations
如果需要修改 store 中的值唯一的方法就是提交 mutation 来修改
4.Actions
官方并不建议我们这样直接去修改 store 里面的值，而是让我们去提交一个 actions，在 actions 中提交 mutation 再去修改状态值
vuex 的使用场景
1.不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式。
2. 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：
① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
辅助函数
mapState
引入
import { mapState } from 'vuex3 种用法
---对象
如果使用箭头函数，当 vuex 的 state 和当前组件的 state，含有相同的变量名称时，this 获取的是 vuex 中的变量，而不是局部变量
computed: mapState({
// 箭头函数 count: state => state.count,
// 这里为了能够使用this获取局部变量localCount，必须使用常规函数 countPlusLocalState (state) {
return state.count + this.localCount
}})---数组 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([ // 映射 this.count 为 store.state.count 'count'])---对象展开运算符 mapState 函数返回的是一个对象。如果需要将它与局部计算属性混合使用，通常我们需要一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。
computed: {
localComputed () {},
...mapState({})
}
也可以使用`...mapState([])`,但前提是映射的计算属性的名称与state的子节点名称相同，如果state在vuex的modules中，则不成功。mapGetters
mapGetters 将 store 中的 getter 映射到局部计算属性
computed: {
...mapGetters([
'oneGetter',
'anotherGetter'
])
}mapMutations
使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。
methods: {
// 将this.tips映射成 this.$store.commit('tips')
...mapMutations(['tips'])
}mapAction
使用 mapActions 辅助函数将组件的 methods 映射成 store.dispatch 调用
methods: {
// 将this.tips映射成 this.$store.dispatch('tips')
...mapActions(['tips'])
}