What is Vuex?
vuex是一个专为Vue.js应用程序开发的状态管理模式。他采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变换
VUEX并不限制你的代码结构，但是，他规定了一些需要遵守的规则：
1.应用层级的状态应该集中到单个的store对象中
2.提交 mutation是更改状态的唯一方法，并且这个过程是同步的
3.异步逻辑都应该封装到action里面
注意！！！！ action和mutation都可以提交方法，但是两个之间最大的区别就是action是异步的！！！切记
使用之前先安装
1.在vue-cli中安装vuex npm install vuex --save
2. 在src文件目录下新建一个名字为store的文件夹，为方便引入并在store文件夹下新建一个index.js 内容如下
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store(); export default store;
3.接下来在main.js里面引入store 然后再全局注入一下，这样一来就可以在每个组件中使用this.$store了；
import store from './store'//引入store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
讲完安装 接下来 进入正题
VUEX集中管理数据：
既然状态是组件需要绑定的数据，那为什么不直接写在组件的data方法里呢？当这个状态只在一个组件中使用时，当然直接在data中定义就可以。但是当多个组件都依赖同一个状态或者都会修改同一个状态时，处理起来就比较麻烦。
因为在vue中，组件通过prop注册自定义属性。父组件通过给子组件的自定义属性赋值将数据传给子组件。另外子组件不能直接修改父组件的数据，它可以emit一个事件，将变更后的数据通过事件参数传给父组件，父组件捕获到事件后更新数据。 这样的话对下面这些场景处理起来就很麻烦：
- 两个兄弟关系（或者毫无关系）的组件都依赖于同一个状态，A组件修改状态后，B组件也要更新；此时A组件无法把修改后的状态传给B。
- 祖先向后代组件传递数据； 需要通过prop一层层的的传递，非常繁琐
所以： 集中管理 ：：：vuex把组件的共享状态抽取出来，以一个全局单例模式进行管理，在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。
状态变化可以预测：：：不允许组件直接修改状态，而是在vuex内部，通过mutation来修改状态，这样每次状态的变更都可以追踪
STATE state 单一状态树 每个应用只有一个store，state里面存放状态
Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照
这个state在一定程度上可以看做是组建中的data用于包存所有组件的公共数据
const state = {
tableHeader :[],//表格头部数据
tableData:[],//表格内容数据
}
mapstate 辅助函数 一个组件想要获取多种状态时，为每一个状态都声明计算属性有些重复，所以使用mapstate帮助我么生成计算属性
//使用mapstate
computed: {
...mapState([
// 表格头部数据
"tableHeader",
// 表格内容数据
"tableData"
]),
},
GETTERS getters 所有组件的computed属性，getters的返回值会根据他的依赖被缓存起来，且当他的依赖值发生改变之后会被重新计算
MUTATIONS mutations store中的methods ，mutations对象中保存着更改数据的回调函数type，第一个参数是state，第二个参数是载荷payload，也就是自定义的参数，调用mutaions中回调函数, 只能使用store.commit(type, payload)
const mutations = {
//获取表头数据
[type.GET_HEADER_DATA] (state, data){
state.tableHeader = data;
},
// 获取表体数据
[type.GET_TABLE_DATA] (state, data){
state.tableData = data;
},
}
使用常量代替Mutation 事件类型，但是一定要在 store.js中引用
//mutations.js
export const GET_TABLE_DATA = "GET_TABLE_DATA" //获取列表数据 export const GET_HEADER_DATA = "GET_HEADER_DATA" //获取列表头部数据
//store.js
import * as type from '../store/mutions-types'
在组件中提交mutation 可以在组件中使用this.$store.commit('xxx')提交mutation ，或者使用mapMutation辅助函数将组件中的methods映射为store.commit调用 需要在根节点注入store
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'GET_TABLE_DATA', // 将 `this.increment()` 映射为 `this.$store.commit('increment')
]}
}
}
ACTION action类似于mutation 不同在于action提交的是mutation，而不是直接更改状态，action可以包括异步操作
const actions = {
// 获取表格头部数据
getTableHeader:function({commit, state}){
return api.getTableHeader().then(res =>{
commit(type.GET_HEADER_DATA,res.data.Model.headList)
})
.catch((error)=>{
alert('error')
})
},
// 获取表格体
getTableData:function({commit,state}){
return api.getTableData().then(res=>{
// console.log(res)
commit(type.GET_TABLE_DATA,res.data.Model.list)
})
},
}
分发action 通过store.dispatch方法触发 但是也可以使用mapAction辅助函数将组件的method映射为 store.dispatch 调用（需要在根节点注入store）
分发同样支持载荷方式和对象方式进行分发，store.dispatch可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise，一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
methods:{，
getTableHeader(){
this.$store.dispatch("users/getTableHeader").then(()=>{
this.tableHeader=this.$store.state.users.tableHeader
})
}
}
----------------------------或者----------------------------------
methods: {
...mapActions([
// 表头数据
"getTableHeader",
]),
}
MODULES modules 将store分成模块（modules）每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割