VueX基本使用总结
一、简介
Vuex是一种状态管理模式，它能够集中式存储管理所有组件的状态，并用相应的规则约束状态以一种可预测的方式发生变化。简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改它里面的数据，得按照Vuex提供的方式来修改。
使用场景：
购物车的数据共享，登入注册
二、优点
- Vuex的状态存储是响应式的：
当Vuex的状态发生改变，所有使用它的组件会自动更新相对应的数据。 - 不能直接修改Vuex的状态：
全局对象变量可以直接修改，但Vuex无法直接修改。必须使用提交mutation的方式来进行修改。（这样做的好处是方便我们跟踪每一个状态的变化，在开发调试的时候非常实用）。
三、安装与使用
- 安装Vuex
npm install vuex --save // 如果安装了淘宝镜像，可以使用 cnpm安装
2.新建store.js ( 名字随便起 )，引入vue和vuex，结构如下
在根实例中注册store
四、Vuex五个核心属性
state:状态
Vuex的作用类似全局对象，Vuex使用单一状态树，用一个对象State包含了整个应用层级的所有状态，可以理解为这些状态就是一堆全局变量和数据。
我们在state中定义属性name，给一个初始值 “张三”；在store实例中注册state；在组件中使用$store.state.name使用定义的属性name
运行程序，在页面上显示出了我们定义的name属性，这里我们使用的是this.$store.state来访问vuex中定义的变量，还有一种辅助函数mapState的方式，我们在后边再讲解。好了，我们继续，定义了状态，我们就要对状态进行管理，去更改状态的值，就是下面要说的mutation
mutation:更改store中状态的唯一方法
之所以说唯一，是因为vuex中规定只能通过提交mutation的方式去更改store中的状态，包括action中的操作，也是通过提交mutation去修改。
另外一点就是vuex中规定mutation中不能包含异步操作，这个在上面的核心对象中已有简单介绍。
在store.js的mutations中我们定义了两个方法，一个是不带参数更新name，一个是带参数更新name。
在示例组件的methods中，我们定义了两个方法，一个是调用无参的mutation方法，一个是调用带参的mutation方法（包含两种方式【载荷】、【对象】）
总结如下
✦.mutation下事件的调用是通过 this.$store.commit 传入对应的type调用，关于辅助函数 mapMutations 的使用在后面一期讲解
✦.mutation下事件的定义分为无参的和有参的两种形式
✦.mutation事件的调用有两种形式，载荷和对象
anction:异步更改状态
用来异步改变state数据。
matution是直接进行的同步操作，如果在mutations里进行异步操作，不会有任何效果。可以通过action → mutations → states这个流程实现异步改变state数据。
上面在mutation的介绍中我们提到了，mutation中规则上是不允许异步操作的，那如果我们需要异步的进行更改状态怎么办？于是vuex为我们提供了action。
从代码和效果中，我们能很直观得到两条信息：
1.action 与 mutation 除了使用了异步操作和调用mutation，其它使用并无差别
2.异步操作时，可以明显的看到我们设置的信息在延迟1s后发生改变
总结如下
✦.action中不能直接更改状态，它是通过提交mutation来实现操作
✦.它的参数是一个与 store 实例具有相同方法和属性的 context 对象，所以可以通过context.state来获取store中的状态，可以通过context.commit来提交更改等
✦.action的调用使用 $.store.dispatch
✦.action事件的定义分为有参和无参两种
✦.action事件的触发同样可以使用载荷和对象两种方式
getter:store中state的派生状态
getter，我们可以理解为是对store中state的一些派生状态，也可以理解为一种计算属性，因为它像计算属性一样，返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算。
getter的使用对我来讲就是将对store中某个属性相同的处理操作抽出出来，做了一个公共的处理
例如，我们使用store中name的时候，需要做一个判断：如果是张三，返回“张三最棒”，其它的原样返回，我们可以这样做
页面上将 this.$store.state.name 改为 formatterName即可。但是，如果我们这个操作不只这一个组件使用，那我们就需要在每一个组件中去定义这样一个计算属性，且不说代码冗余的问题
使用getter则可以很好的解决这个问题，不仅代码简洁，也利于维护，不多说，上getter使用代码：
总结如下
✦.getter类似计算属性，是对store中state的一些派生状态，可以简化代码、便于维护
✦.getter的使用方法 $.store.getters.属性名
✦.getter的定义可以带参可以不带参
关于module，它是对store的一个分割，将store分割成一个个小的模块，每个模块中又具有store完整的功能。他的使用主要面向一些状态非常多的大型应用，关于module的使用在这就不讲了，有兴趣可以看一下官网的介绍和讲解
五、项目结构
Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则：
- 应用层级的状态应该集中到单个store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑应该封装到action 里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation、和 getters 分割到单独的文件对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例