Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单点总结，Vuex是一种状态管理模式，存在的目的是共享可复用的组件状态。
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
State属性是Vuex的单一状态树
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
Getter类似于Vue的 computed 对象。是根据业务逻辑来处理State，使得生成业务所需的属性。
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
Mutation是唯一用来更改Vuex中状态的方法。
Action 类似于 mutation，不同在于：
★Action 提交的是 mutation，而不是直接变更状态。
★Action 可以包含任意异步操作。
Action是用来解决异步操作而产生的，它提交的是Mutation。
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation、action、甚至是嵌套子模块——从上至下进行同样方式的分割
Module是将Vuex模块化的对象，目的是更好的维护。
通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。
state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）
首先，需要在当前组件中引入Vuex。
然后，通过Vuex来调用辅助函数。
computed:{
...Vuex.mapState({
input:state=>state.inputVal,
n:state=>state.n
})
}
state：用来存储公共的状态 在state中的数据都是响应式的。
响应式原因：state里面有一个getters、setters方法；data中的数据也是响应式的，因为里面也有getters和setters方法
在computed属性中来接收state中的数据,接收方式有2种（数组和对象，推荐对象）
优点：
★本身key值是别名，要的是val的值，key的值a 和 val="a"一样就行，随意写。减少state里面长的属性名。
★可以在函数内部查看state中的数据，数组方式的话，必须按照state中的属性名。
computed:Vuex.mapState({
key:state=>state.属性
})
如果自身组件也需要使用computed的话，通过解构赋值去解构出来
computed:{
...Vuex.mapState({
key:state=>state.属性
})
}
methods:{
...Vuex.mapActions({
add:"handleTodoAdd", //val为actions里面的方法名称
change:"handleInput"
})
}
add、change为action方法别名，直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作。
等价于如下的函数调用，
methods: {
handleInput(e){
let val = e.target.value;
this.$store.dispatch("handleInput",val )
},
handleAdd(){
this.$store.dispatch("handleTodoAdd")
}
}
actions里面的函数主要用来处理异步的函数以及一些业务逻辑,每一个函数里面都有一个形参，这个形参是一个对象，里面有一个commit方法，这个方法用来触发mutations里面的方法
只是做简单的数据修改（例如n++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。
methods:{
...Vuex.mapMutations({
handleAdd:"handlMutationseAdd"
})
}
mutations里面的函数主要用来修改state中的数据。mutations里面的所有方法都会有2个参数，一个是store中的state，另外一个是需要传递的参数。
getters类似于组件里面computed，同时也监听属性的变化，当state中的属性发生改变的时候就会触发getters里面的方法。getters里面的每一个方法中都会有一个参数 state
computed:{
...Vuex.mapGetters({
NumN:"NumN"
})
}
★state看成一个数据库，只是它是响应式的，刷新页面数据就会改变；
★actions看成controller层，做数据的业务逻辑；
★mutations看成model层，做数据的增删改查操作。
把公共的状态按照模块进行划分
★每个模块都相当于一个小型的Vuex
每个模块里面都会有state getters actions mutations
★切记在导出模块的时候加一个 namespaced:true 主要的作用是将每个模块都有独立命名空间
★namespace：true在多人协作开发的时候，可能子模块和主模块中的函数名字会相同，这样在调用函数的时候，相同名字的函数都会被调用，就会发生问题。为了解决这个问题，导出模块的时候要加namespace：true.
export default {
namespaced: true,
....
}
mapState、mapGetters、mapMutations、mapActions第一个参数是字符串（命名空间名称），第二个参数是数组（不需要重命名）/对象（需要重命名）。
mapXXXs('命名空间名称',['属性名1','属性名2'])
mapXXXs('命名空间名称',{
'组件中的新名称1':'Vuex中的原名称1',
'组件中的新名称2':'Vuex中的原名称2',
})